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

时间:2016-11-13 16:56:08

标签: javascript angularjs angular

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

它有两个自定义组件,

  1. 视频list.ts
  2. 视频player.ts
  3. 上述两个组件都使用其指令显示在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.'; } 变量?

1 个答案:

答案 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()