angular - 在同级组件 Angular 2 之间进行通信

Question

我试图遵循这个答案，但它太困惑了 Angular 2 event catching between sibling components

当点击子组件 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]);
}

Answer 1

你不能这样做。首先，您必须使用@ViewChild(Child2) 在父级中获取 child2(按组件而不是按字符串选择 ViewChild 很重要)。然后你必须在 parent 中捕获事件并在 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);
  }

}