2017-09-28 9 views
0

私はObservableを使用して他のコンポーネントと通信するAngular 2/4サービスを持っています。アングルサービスは購読済みのコンポーネントを更新しません

サービス:

let EVENTS = [ 
    { 
     event: 'foo', 
     timestamp: 1512205360 
    }, 
    { 
     event: 'bar', 
     timestamp: 1511208360 
    } 
    ]; 

@Injectable() 
export class EventsService { 

    subject = new BehaviorSubject<any>(EVENTS); 

    getEvents(): Observable<any> { 
    return this.subject.asObservable(); 
    } 

    deleteEvent(deletedEvent) { 
    EVENTS = EVENTS.filter((event) => event.timestamp != deletedEvent.timestamp); 
    this.subject.next(EVENTS); 
    } 

    search(searchTerm) { 
    const newEvents = EVENTS.filter((obj) => obj.event.includes(searchTerm)); 
    this.subject.next(newEvents); 
    } 
} 

homeコンポーネントは、このサービスに加入することができ、正しくイベントが削除されたときに更新します。

export class HomeComponent { 

    events; 
    subscription: Subscription; 

    constructor(private eventsService: EventsService) { 
    this.subscription = this.eventsService.getEvents().subscribe(events => this.events = events); 
    } 

    deleteEvent = (event) => { 
    this.eventsService.deleteEvent(event); 
    } 
} 

は、私はまた、表示されるルート要素を持っています検索フォーム。フォームが送信されると、サービスが呼び出され、検索が実行され、this.subject.nextが結果(上記参照)を呼び出します。ただし、これらの結果はhomeコンポーネントには反映されません。どこが間違っていますか?フルコードについてはplnkr.co/edit/V5AndArFWy7erX2WIL7Nをご覧ください。

答えて

1

サービスを複数回提供すると、送信者と受信者が同じインスタンスを使用していないため、複数のインスタンスが取得され、通信には使用できません。

アプリケーション全体で1つのインスタンスを取得するには、AppModuleのサービスを提供してください。

Plunker example

関連する問題