Question

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

它有两个自定义组件，

视频list.ts
视频player.ts

上述两个组件都使用其指令显示在vsvarsall.bat组件中。

视频播放器组件应将所有点击的歌曲显示为app.ts变量，因为歌曲列表位于视频列表组件中，我无法理解如何传递点击的歌曲项目并显示其标题视频播放器组件。

尽管如此，视频播放器组件为{{ nowPlaying }}对象变量设置了@Input装饰器，但我不知道如何通过视频列表组件中的应用组件访问所选对象。

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

以下是代码：（https://plnkr.co/edit/Tt0zLudPqhrBfG0iffj1）

app.ts

nowPlayingDefault

视频-list.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 {}

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

}

如何将点击的歌曲标题从视频列表组件显示到视频播放器组件的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.'; }变量？

Answer 1

添加playImmediatelyAtRate以便能够通知

@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()

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

1 个答案: