我有
HTML5<视频> Angular2组件中的元素.我需要访问它以便在允许用户将其共享到Twitter之前检查持续时间.
有没有办法通过模型绑定或直接访问DOM,我可以在组件的支持类中获取此信息？
我尝试使用ng-model绑定它,就像在组件的模板中一样：
<video controls width="250" [(ng-model)]="videoElement">
<source [src]="video" type="video/mp4" />
</video>
并在组件的类(TypeScript)中：
videoElement: HTMLVideoElement;
这给了我这个错误：EXCEPTION：[null]中的”没有值访问器
我只能通过给视频元素一个id并使用document.getElementById(“videoElementId”)来访问它,但似乎必须有更好的方法.
解决方法
您可以注入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访问持续时间
