Kommunizieren zwischen Geschwister Komponenten Anguar 2

Question

Ich habe versucht, diese Antwort zu folgen, aber es ist zu verwirrend Angular 2 event catching between sibling components

ich eine Methode in Kind Komponente 1 nennen wollen, wenn etwas auf Kind Komponente 2

geklickt wird

Die untergeordnete Komponente 2 gibt ein Ereignis namens trackClick aus.

Geordnete Komponente:

<div> 

    <audio-player></audio-player> 

    <audio-albums></audio-albums> 

</div> 

Child Komponente 1 (Audio-Player)

// Don't know what to do here, want to call this function 

trackChanged(track){ 
    console.log("YES!! " + track); 
} 

Child Komponente 2 (Audio-Alben)

<li class="track" (click)="playTrack(track)"> </li> 

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

playTrack(track):void{ 
    console.log("calling playTrack from child 2:" + track); 
    this.trackClick.next([track]); 
} 

Answer 1

können Sie es nicht so machen. Zunächst müssen Sie child2 in Eltern erhalten, indem mit @ViewChild (Child2) (es ist wichtig, ViewChild durch die Komponente nicht durch Zeichenfolge wählen). dann müssen Sie das Ereignis in Eltern fangen und welche Methode Sie wollen auf child2 ausführen. mehr oder weniger etwas wie folgt aus:

import { AudioAlbumsComponent } from '...'; 
import { AudioPlayerComponent } from '...'; 

@Component({ 
    template: ` 
    <div> 
     <audio-player></audio-player> 
     <audio-albums (trackClick)="onTrackClicked($event)"></audio-albums> 
    </div>`, 
    directives: [AudioPlayerComponent, AudioAlbumsComponent], 
}) 

export class Parent { 
    @ViewChild(AudioPlayerComponent) private audioPlayer: AudioPlayerComponent; 

    onTrackClicked($event) { 
    this.audioPlayer.trackChanged($event); 
    } 

} 

Answer 2

Etwas wie folgt aus:

Eltern

<div> 
    <audio-player (trackchanged)="trackChanged($event);></audio-player> 
    <audio-albums></audio-albums> 
</div> 

@ViewChild(Child2) child2Component: Child2Component; 

trackChanged(value:any) { 
child2Component.trackChanged(value); 
} 

Child1

... 
@Output() trackchanged= new EventEmitter(); 
... 
playTrack() { 
    this.trackchanged.emit({value: this.track}); 
} 

Child2

trackChanged(track){ 
    console.log("YES!! " + track); 
} 

Answer 3

Eine alternative (Template-only way) ist

<audio-player #audioPlayer></audio-player> 
<audio-albums (trackClick)="audioPlayer.trackChanged($event)"></audio-albums> 

Der Ereignishandler verweist <audio-player> durch die Schablone variable #audioPlayer.