Связь между родственными компонентами Angular 2

Я пытался следовать этому ответу, но это слишком запутанно /а>

Я хочу вызвать метод в дочернем компоненте 1, когда что-то нажимается на дочерний компонент 2.

Дочерний компонент 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]);
}

angular eventemitter angular2-components
person Sumama Waheed    schedule 24.08.2016    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Вы не можете сделать это так. сначала вам нужно получить дочерний элемент2 в родительском элементе с помощью @ViewChild(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);
  }

}
person kit    schedule 24.08.2016
comment
хорошо, я боялся, что это будет ребенок2-›родитель-›ребенок1, спасибо, я попробую - person Sumama Waheed; 24.08.2016

arrow_upward
7
arrow_downward

Альтернативой (только для шаблона) является

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

Обработчик событий ссылается на <audio-player> по переменной шаблона #audioPlayer.

person Günter Zöchbauer    schedule 25.08.2016
comment
о, хорошо, это намного лучше, чем проходить через родителей... спасибо! - person Sumama Waheed; 25.08.2016

arrow_upward
2
arrow_downward

Что-то вроде этого:

Родитель

<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);
}
person Marcel Hoekstra    schedule 24.08.2016