Question

我有一个非常简单的问题，我真的不知道如何使用Google ...我这里有2个组件，第一个是playlist.component.ts

import {Component} from 'angular2/core';
import {Video} from './video';
import {VideoFrame} from './videoiFrame.component';

@Component({
   selector: 'playlist',
   templateUrl: 'app/ts/playlist.component.html',
   inputs: ['videos']
})

export class PlaylistComponent {
   /*
    OnClick
   */
   onSelect(vid:Video) {
   /* change the value of this.videoID in videoiFrame here*/
   }
}

另一个是videoiFrame.component：

import {Component} from 'angular2/core';
import {Video} from './video';

@Component({
  selector: 'ytVideo',
  templateUrl: 'app/ts/videoiFrame.component.html',
})

export class VideoFrame {
  videoID:string;

  constructor() {
    this.videoID = "123456";
  }
}

如何通过onSelect更改videoID变量？

我尝试过：new VideoFrame().videoID = "newID";我希望它可以像那样工作，但事实并非如此。 `

Answer 1

您需要通过父组件进行沟通：

PlaylistComponent：

@Component({
   selector: 'playlist',
   templateUrl: 'app/ts/playlist.component.html',
   inputs: ['videos']
})

export class PlaylistComponent {
   @Output('onVideoSelect')
   public onVideoSelect: EventEmitter<Video> = new EventEmitter();
   onSelect(vid:Video) {
      this.onVideoSelect.emit(vid);
   }
}

VideoComponent：

@Component({
  selector: 'ytVideo',
  templateUrl: 'app/ts/videoiFrame.component.html',
})

export class VideoFrame {
  @Input('video')
  public video: Video = null;
}

ParentComponent（无论是什么）：

@Component({
  selector: 'parent'
})

export class ParentComponent {
  public selectedVideo: Video = null;

  public selectVideo(video: Video) {
     this.selectedVideo = video;
  }
}

在父组件模板中：

<playlist (onVideoSelect)="selectVideo($event)"></playlist>
<yt-video [video]="selectedVideo></yt-video>

其他选项是使用具有selectedVideo$ Observable的服务，或者您可以使用Redux。

AngularJS 2：在变量所属的类之外更改变量的值

1 个答案: