Service angulaire ne mettant pas à jour les composants souscrits

Question

J'ai un service Angular 2/4 qui utilise des observables pour communiquer avec d'autres composants.

Service:

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); 
    } 
} 

Mon élément home est en mesure de souscrire à ce service et met à jour correctement lorsqu'un événement est supprimé:

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); 
    } 
} 

j'ai aussi un élément racine qui affiche une formulaire de recherche. Lorsque le formulaire est soumis, il appelle le service, qui effectue la recherche et appelle this.subject.next avec le résultat (voir ci-dessus). Toutefois, ces résultats ne sont pas reflétés dans le composant home. Où vais-je mal? Pour le code complet s'il vous plaît voir plnkr.co/edit/V5AndArFWy7erX2WIL7N.

Answer 1

Si vous fournissez un service plusieurs fois, vous obtiendrez plusieurs instances et cela ne fonctionne pas pour la communication, car l'expéditeur et le destinataire n'utilisent pas la même instance.

Pour obtenir une seule instance pour l'ensemble de votre application, fournissez le service au AppModule et nulle part ailleurs.

Plunker example