Abonnieren mehrere Angular2 Komponenten zu einem Service

Question

Ich versuche, zwei Components zu machen, um durch eine Service benachrichtigt werden, wenn ein anderes Component reagiert auf ein DOM-Ereignis.

Dies sollte mit RxJS Subject Observable, oder seine direkten Unterklassen (BehaviorSubject oder ReplaySubject wahrscheinlich) erreicht werden.

Dies ist das Modell:

• TriggerComponent
• NotificationService
• FirstListeningComponent
• SecondListeningComponent

Keines dieser drei Komponenten Eltern-Kind sind.

Ich habe versucht, diese Ansätze zu folgen:

1. Angular2 Parent and Children communication via service
2. RxJSObservable demo explanation

aber ich schaffe nicht sie für meine Bedürfnisse anzupassen.

Bitte überprüfen my live example on plnkr.co

Bin ich auf dem richtigen Weg?

Danke

Answer 1

ich Ihre Plunker mit einer working Version behoben.

Das Problem bestand darin, dass neue Instanzen des NotificationService für jede Komponente erstellt wurden. Es sollte nur eine Instanz vorhanden sein, die in der Hauptkomponente erstellt wurde, und die Komponenten sollten diese Instanz für die Kommunikation freigeben.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <br> 
     <trigger-component></trigger-component> 

     <first-listening-component></first-listening-component> 
     <second-listening-component></second-listening-component> 
    </div> 
    `, 
    providers : [NotificationService] 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 
}