如何访问Angular2中的HTML视频元素

Question

我<video>在Angular2组件中有一个HTML5 元素.我需要访问它以便在允许用户将其共享到Twitter之前检查持续时间.

有没有办法通过模型绑定或直接访问DOM,我可以在组件的支持类中获取此信息？

我尝试使用ng-model绑定它,就像在组件的模板中一样:

<video controls width="250" [(ng-model)]="videoElement">
    <source [src]="video" type="video/mp4" />
</video>

并在组件的类(TypeScript)中:

videoElement: HTMLVideoElement;

这给了我这个错误: EXCEPTION: No value accessor for '' in [null]

我只是通过给视频元素一个id并使用document.getElementById("videoElementId")它来访问它,但似乎必须有更好的方法.

Answer 1

您可以注入ElementRef然后访问元素,如

element.nativeElement.shadowRoot.querySelector('video').duration;
// with encapsulation: ViewEncapsulation.Native

和其他视图封装模式可能

element.nativeElement.querySelector('video').duration;

(虽然还没试过).

这也应该有用

<video (durationchange)="durationChangeEventHandler($event)"></video>

然后使用 $event.target

使用指令(Dart代码中的示例)

@Directive(selector: 'video')
class VideoModel {
  ElementRef _element;
  VideoModel(this._element) {
    VideoElement video = _element.nativeElement as VideoElement;
    video.onDurationChange.listen((e) => duration = video.duration);
  }

  num duration;
}

在您的组件中添加

@Component(
    selector: 'my-component',
    viewProviders: const [VideoModel], 
    directives: const [VideoModel],
    templateUrl: 'my_component.html') 
class MyComponent {
    @ViewChild(VideoModel) 
    VideoModel video;
}

现在你可以访问持续时间了 video.duration