ng2 - 从兄弟组件指令传递信息

Question

我正在通过创建简单的项目来学习 Angular 2，这里是应用程序的Plunker。

它有两个定制组件，

1. video-list.ts
2. video-player.ts

以上两个组件都使用它们的指令显示在app.ts 组件中。

视频播放器组件应将任何点击的歌曲显示为{{ nowPlaying }} 变量，因为歌曲列表位于视频列表组件中，我无法理解如何传递点击的歌曲项目并在视频上显示其标题-播放器组件。

虽然，视频播放器组件有一个 @Input 装饰器用于 nowPlaying 对象变量，但我不知道如何通过视频列表组件中的应用程序组件访问所选对象。

我还在应用组件中添加了一个nowPlayingDefault 变量，默认将其传递给视频播放器组件。

这里是代码：(https://plnkr.co/edit/Tt0zLudPqhrBfG0iffj1)

app.ts

// root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { VideoList } from './video-list';
import { VideoPlayer } from './video-player';

@Component({
  selector: 'my-app',
  template: `
    <div class='block'>
      <h2>Hello {{name}}</h2> 
      <video-player [nowPlaying]='nowPlayingDefault'></video-player> 
      <hr>
      <video-lists></video-lists>
    </div>
  `,
})
export class App {
  nowPlayingDefault:string = 'Please select a song.';
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ 
    App, 
    VideoList,
    VideoPlayer
  ],
  bootstrap: [ App ]
})
export class AppModule {}

video-list.ts

import { Component } from '@angular/core';

@Component({
  selector: 'video-lists',
  template: ` 
    <div id='video-lists' class='block'>

      <div style='text-align: center;'>
        From Video List Component
      </div>

      <a href='' style='display: block'
        *ngFor='let item of items'
        (click)='selectSong( item, $event )'>
        {{ item.title }}
      </a>

    </div>
  ` 
})

export class VideoList {
  test: string = 'sos';
  items = [
    {
      'title' : 'yo test',
      'url'   : '823ery783dh.mp3'
    },
    {
      'title' : 'yall rappin',
      'url'   : '25wd13edc1.mp3'
    }
  ];

  selectSong( item, event )
  {
    event.preventDefault();
    console.log( item );
  }

}

video-player.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'video-player',
  template: `
    <div id='video-player' class='block'>
      <div style='text-align: center'>~ Video Player Block ~ </div>
      <div style='color: blue;'>{{ nowPlaying }}</div>
    </div>
  `
})

export class VideoPlayer {
  @Input() nowPlaying: string = 'Please select a song.';
}

如何将点击的歌曲标题从视频列表组件显示到视频播放器组件的nowPlaying 变量中？

Answer 1

添加@Output()以便能够通知

export class VideoList {
  @Output() selectedChange:EventEmitter = new EventEmitter();      

  test: string = 'sos';
  items = [
    {
      'title' : 'yo test',
      'url'   : '823ery783dh.mp3'
    },
    {
      'title' : 'yall rappin',
      'url'   : '25wd13edc1.mp3'
    }
  ];

  selectSong( item, event )
  {
    event.preventDefault();
    console.log( item );
    this.selectedChange.emit(item);
  }
}

并绑定到@Output() 事件并在发出新值时更新属性

@Component({
  selector: 'my-app',
  template: `
    <div class='block'>
      <h2>Hello {{name}}</h2> 
      <video-player [nowPlaying]='nowPlayingDefault'></video-player> 
      <hr>
      <video-lists (selectedChange)="nowPlaying=$event"></video-lists>
    </div>
  `,
})