ng2 - 传递来自兄弟组件指令的信息

Question

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

它有两个定制的组件，

1. 视频list.ts
2. 视频player.ts

上述两个部件都使用他们的指令显示在app.ts compontent 。

视频播放器组件应该将任何点击的歌曲显示为{{ 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 {} 

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

} 

视频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> 
    `, 
})