In Winkel 2 habe ich 2 Eltern-Komponenten, die emittieren und hören müssen, aber meine Codes funktionieren nicht

Question

In Winkel 2 Ich habe 2 Eltern-Komponenten, die emittieren müssen und hören, aber meine Codes funktionieren nicht

Ich habe im Grunde einen Elternteil Komponente, die eine Übertragung zu einer anderen übergeordneten Komponente durchführen muss, damit diese Komponente sich selbst aktualisieren kann.

Dies ist meine Komponente emittiert:

@Output() userUpdated = new EventEmitter(); 

    userUpdated = "userUpdated($event)"; 

    userUpdated.emit("test"); 

Das ist meine andere übergeordnete Komponente für die emit hören:

userUpdated(item) { 
    this.getAllUnReadMessages(); 
    } 

Outcome viel Konsole Fehler ist.

Aber das Problem ist, dass sie wollen, dass ich die emittiere in die Komponente, die ich nicht für dieses Szenario tun kann.

Ich muss nur eine grundlegende emittieren oder Broadcast zu einer anderen Komponente. Es wird schwierig für etwas Einfaches.

Ich habe immer nur das funktioniert für Eltern zu Kind Komponenten.

Aber ich brauche es jetzt für Eltern zu Elternteil arbeiten.

Answer 1

OK hier ist der Plunker: http://plnkr.co/edit/qMnXG7oxF3SdTptKHUen?p=preview

Es gibt viele Antworten auf diese Frage auf Stackoverflow und Sie veröffentlichen diese Frage nicht zum ersten Mal ..

Sie zuerst einen Shared Service machen für Ihre App

import {Subject} from 'rxjs/Subject'; 

@Injectable() 
export class MyService { 

    public invokeEvent:Subject<any> = new Subject(); 

    constructor() {} 
} 

dann in Ihrem Modul bereitzustellen, so dass die Komponenten die gleiche Instanz dieser Komponente (Singleton) teilen

@NgModule({ 
    imports: [ BrowserModule ], 
    providers: [MyService] 
    declarations: [ App, AnotherApp ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Von diesem Punkt an geht es um die Verwendung von Subject in Ihren Komponenten.

Wenn Sie ein Ereignis emittieren wollen, rufen Sie es mit next

this._myService.invokeEvent.next(this.counter++); 

und erhalten/anhören, abonnieren Sie doch einfach:

this._myService.invokeEvent.subscribe((value) => { 
      console.log(value); 
      this.name = value; 
     });