was ist eventemitter und eventemitter service. Wie verwenden wir Event Emitter ohne @output und @input?

Question

Ich bin neu in der angular2 und ich bin verwirrt über den EventEmitter mit EmitterService kann mir jemand den Zweck von Emitter erklären.

Und ohne Verwendung von @input und @output können wir die Daten zu einer Seite Komponente zu einer anderen Seite Komponente senden.

Dank

Answer 1

lesen this Angular cookbook about component interaction and flow, besonders this Teil über geordneten Komponenten für Kinderveranstaltungen zu hören.

Grundsätzlich sind EventEmitter genau für den Zweck der Elternkomponenten gedacht, die Daten von Kindern erhalten. Alle @Outputs sind EventEmitter und der @Output-Decorator stellt ein Ereignis bereit, an das die Eltern Listener in seiner Vorlage anhängen können.

In der untergeordneten Komponente definieren Sie eine EventEmitter wie so:

@Output() childEventEmitter = new EventEmitter<any>(); 

Sie emittieren Ereignisse wie folgt aus:

this.childEventEmitter.emit("Send this to the parent"); 

Wenn das getan ist, kann die Eltern für die Veranstaltung hören und ein anhängen Rückruf mit nichts mehr als das:

<child-component (childEventEmitter)="parentCallback(whateverWasEmitted)"></child-component> 

Es macht (Kind -> Elternteil) communicati auf so einfach wie normale hierarchische Datenfluss (Eltern -> Kind). Möglicherweise haben Sie bemerkt, dass beim Senden von Informationen von Eltern zu Kind das Elternelement an die @Input-Eigenschaften des Kindes in der Vorlage mit [eckigen Klammern] gebunden wird. Wenn ein Elternteil Informationen vom Kind erhält, bindet es sich in seiner Vorlage an die @Output-Ereignisse des Kindes mit (Klammern). Dies ist ein wichtiger Prinzip in Angular 2.

@Input() ist zu Immobilien ist auf [eckigen Klammern] als @Output() ist, an Veranstaltungen ist (Klammern).

Um Ihre andere Frage zu beantworten, ja, ist es möglich, dass Komponenten, die nicht direkt "nebeneinander" in der Komponentenhierarchie sind, kommunizieren, aber in diesem Fall ist eine gemeinsame Instanz eines Angular 2-Dienstes erforderlich um als Mittelmensch zu fungieren. Lesen Sie this section des Angular 2-Kochbuchs, mit dem ich vorher verbunden war, um mehr darüber zu erfahren.

Siehe auch: Very helpful video about Angular 2 data flow