Angular 2: contentChildren communication

Question

Wie wird die Kommunikation zwischen contentChildren und seinem übergeordneten Element bevorzugt?

AKTUALISIERT: Kind möglicherweise nicht direkt Eltern ...

eine zufällige Liste von Kindern gegeben, die von einer Gruppe eingewickelt:

<child-group> 
    <div>Some other content, child may not be direct parent...</div> 
    <child *ngFor="let item of data$ | async;"></child> 
</child-group> 

Das Kind Komponente:

@Component({ 
    selector: 'child', 
    template: '<button (click)="didSomethingTellGroup()"></button>', 
    styleUrls: ['child.component.scss'], 
}) 
export class ChildComponent implements OnInit { 

    constructor() { 
    } 

    ngOnInit() { 

    } 

    doSomething() { 
     console.log('Called from group component') 
    } 

    didSomethingTellGroup() { 
     //EventEmitter? 
     //Observable? 
    } 

} 

Die Hauptkomponente:

Wie kann ich eine Child-Methode von ChildGroup aufrufen? Und wie kann ein Kind Informationen an die ChildGroup zurücksenden?

UPDATE:

In den Kommentaren unten erwähnte ich, dass, wenn ich eine Methode auf dem Kind nichts zu berufen versuche vorging. Nun stellt sich heraus, dass ich zu den erforderlichen Änderungen abonnieren und für die Kinder warten ... dann war ich in der Lage

ngAfterContentInit() 
{ 
    this.childrenList.changes 
     .subscribe(list => { 
       list.forEach(c => c.doSomething()) 
      } 
     ); 
} 

Answer 1

Die bisherigen Antworten sind völlig korrekt, @Output mit und Schleife durch Ihre QueryList ist der Weg zu gehen, aber wenn, wie Sie erwähnt haben, Ihre Kinder sind nicht direkt diejenigen, könnten Sie einen Dienst als Kommunikations chanel zu verwenden .

Hier ist ein sehr einfaches Beispiel: http://plnkr.co/edit/VuYiz7gVB42PEnnk2d8C (Ich bin kein Experte für Observables, also vielleicht könnte dies verbessert werden).

Grundsätzlich, wenn Sie auf eine Schaltfläche Ihres Kindes Komponente klicken, wird es verwendet:

this.myService.sendToParent(this.random); 

Um eine Nachricht an die Eltern durch den Dienst zu senden. In dieser Funktion sendet der Dienst eine Nachricht über einen beobachtbaren dem Mutter:

this.parentSubject.next(value); 

Zuvor hatte die Eltern auf diese beobachtbaren gezeichnet:

this.service.getParentMessages().subscribe((data) => 
{ 
    alert('Something changed from a children: ' + data); 

    this.service.sendToChildren(data); 
}); 

Wie Sie sehen können, wenn sie einen neuen Wert erhält , verwendet es die Funktion sendToChildren, um eine Nachricht an alle seine Kinder durch den Dienst zu senden (das gleiche Prinzip gilt dann). Wenn Kinder Nachrichten erhalten, ändert sich ein Wert, der schließlich in der Komponente angezeigt wird.

Answer 2

für Ihr Kind zu Eltern Szenario aufzurufen, ein @Output Ereignis-Emitter ist die beste Wahl. Ihre untergeordnete Komponente konvertiert eine interne Aktion in sich (ein Benutzer klickt irgendwo) in ein geschäftsbezogenes Ereignis, auf das jeder Benutzer dieser Komponente warten kann.

Wie für Eltern anrufen Kind, Sie sind schon am meisten Weg dorthin mit Ihrem Beispiel. Überspringen Sie einfach die QueryList und rufen Sie die gewünschte Methode für Ihre untergeordneten Komponenten auf.

ngAfterContentInit() {  
    //How to invoke  doSomething() on all children? 
    this.childrenList.forEach (c => c.doSomething();) 
    ... 
}