如何在Angular 2(TypeScript)中编写替代代码"document.querySelector"？

Question

我正在使用Angular 2(TypeScript).我想重写下面的代码.

<video></video>

var video = document.querySelector("video");
video.src = URL.createObjectURL(localMediaStream);
video.play();

但是,我不知道如何在Angular 2中获得"视频".这是我迄今做的.

<video [src]="videoSrc"></video>

videoSrc:string;
…
this.videoSrc = URL.createObjectURL(stream);
// Since I don't know any way to get "video",
// do I have any way to use video.play() here?

Answer 1

您可以video使用局部变量和来获取对元素的引用@ViewChild

@Component({
  selector: 'my-app',
  template : `<video #my-video></video>`
})
export class App implements AfterViewInit {

  // myVideo == #my-video
  @ViewChild('myVideo') myVideo: any;

  afterViewInit() {
    let video = this.myVideo.nativeElement;
    video.src = URL.createObjectURL(yourBlob);
    video.play();
  }

这里有一个plnkr证明的情况下(在plnkr相差一点点,因为我无法加载视频,显然这是没有那么简单,而是我加载图像作为海报的视频标签,你会得到的想法)

更新

您删除了上一条评论,但这是一个有效的问题,因为文档只指定了一种使用方式@ViewChild.文档使用类型查询子项,但您也可以使用字符串.请参阅ViewChildMetadata#L327它接受类型(组件/指令)或字符串.

更新2

实际上,文档显示了这种替代方案,但它是另一部分.在Query文档下,您可以看到它.请注意,Query不推荐使用,但语法对于ViewChild/ViewChildren和仍然有效ContentChild/ContentChildren.