在兄弟组件Angular 2之间进行通信

发布时间：2020-12-17 07:59:58 所属栏目：安全来源：网络整理

导读：我试着按照这个答案,但它太混乱了 Angular 2 event catching between sibling components 当在子组件2上单击某些内容时,我想调用子组件1中的方法子组件2发出一个名为trackClick的事件. 父组件： div audio-player/audio-player audio-albums/audio-albums/d

我试着按照这个答案,但它太混乱了 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]);
}

你不能这样做.首先,您必须使用@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);
  }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!