7

私はこの答えに従おうとしましたが、兄弟コンポーネント間のAngular 2イベントキャッチがあまりにも混乱しています

子コンポーネント 2で何かがクリックされたときに、子コンポーネント 1のメソッドを呼び出したい

子コンポーネント 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]);
}
4

3 に答える 3

8

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

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

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

于 2016-08-25T04:45:47.513 に答える
8

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

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);
  }

}
于 2016-08-24T20:30:03.940 に答える
2

このようなもの：

親

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

@ViewChild(Child2) child2Component: Child2Component;

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

子1

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

子2

trackChanged(track){
    console.log("YES!! " + track);
}
于 2016-08-24T20:37:11.803 に答える