我正在通过创建简单的项目来学习Angular 2,这里是应用程序的Plunker。
它有两个自定义组件,
上述两个组件都使用其指令显示在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.';
}
变量?
答案 0 :(得分:5)
添加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()