Question

我正在使用Angular 2（TypeScript）。我想重写下面的代码。

<video></video>

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

然而，我不知道如何获得＆＃34;视频＆＃34;在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有点不同，因为我无法加载视频，显然它不是那么简单，而是我加载图像作为视频标签的海报你会明白这个想法）

<强>更新

您删除了上一条评论，但自docs only specify one way使用@ViewChild以来这是一个有效的问题。文档使用该类型查询子级，但您也可以使用字符串。请参阅ViewChildMetadata#L327，它接受类型（组件/指令）或字符串。

更新2

实际上，文档显示了这种替代方案，但它是另一部分。在Query文档下，您可以看到它。请注意，Query已弃用，但语法仍然适用于ViewChild/ViewChildren和ContentChild/ContentChildren。

如何编写替代代码＆＃34; document.querySelector＆＃34;在Angular 2（TypeScript）？

1 个答案: