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

我正在使用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?

您可以使用局部变量和@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的docs only specify one way以来这是一个有效的问题.文档使用该类型来查询子项,但您也可以使用字符串.请参阅ViewChildMetadata#L327,它接受类型(组件/指令)或字符串.

更新2

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

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

相关文章