は2

Question

Anguar兄弟コンポーネント間の通信私は何かが子コンポーネント2

上でクリックされたときに子コンポーネント1でメソッドをコールするこの答えに従うことをしようとしたが、そのあまりにも混乱Angular 2 event catching between sibling components

子コンポーネント2は、trackClickというイベントを送出します。

親コンポーネント：

<div> 

    <audio-player></audio-player> 

    <audio-albums></audio-albums> 

</div> 

チャイルドコンポーネント1（オーディオプレーヤ）

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

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

子成分2（オーディオアルバム）

<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

このようにすることはできません。 @ViewChild（Child2）を使用して、親でchild2を取得しなければなりません（文字列ではなくコンポーネントでViewChildを選択することが重要です）。親でイベントをキャッチし、child2に必要なメソッドを実行する必要があります。このような多かれ少なかれ何か：

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

このような何か：

親

<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

代替（テンプレート唯一の方法は）

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

イベントハンドラでテンプレート変数#audioPlayerによって<audio-player>を参照します。