Angular Service nicht abonnierte Komponenten aktualisieren

Question

Ich habe einen Angular 2/4 Service, der Observables verwendet, um mit anderen Komponenten zu kommunizieren.

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

Meine home Komponente ist in der Lage diesen Service abonnieren und korrekt aktualisiert, wenn ein Ereignis gelöscht wird:

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

Ich habe auch eine Wurzelkomponente, die eine zeigt Suchformular. Wenn das Formular gesendet wird, ruft es den Dienst auf, der die Suche durchführt und this.subject.next mit dem Ergebnis aufruft (siehe oben). Diese Ergebnisse spiegeln sich jedoch nicht in der home Komponente wider. Wo gehe ich falsch? Den vollständigen Code finden Sie unter plnkr.co/edit/V5AndArFWy7erX2WIL7N.

Answer 1

Wenn Sie einen Dienst mehrmals bereitstellen, erhalten Sie mehrere Instanzen und dies funktioniert nicht für die Kommunikation, da der Sender und der Empfänger nicht dieselbe Instanz verwenden.

Um eine einzige Instanz für Ihre gesamte Anwendung zu erhalten, stellen Sie den Dienst unter AppModule und nirgendwo sonst zur Verfügung.

Plunker example