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

【问题标题】：How to get access to an HTML video element in Angular2如何访问 Angular2 中的 HTML 视频元素
【发布时间】：2016-03-17 16:43:37
【问题描述】：

我在 Angular2 组件中有一个 HTML5 <video> 元素。在允许用户将其分享到 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") 就可以访问它，但似乎必须有更好的方法。

【问题讨论】：

我可以使用 document.getElementById，但不允许使用类似 videoElement.play() 或 videoElement.pause() 的函数。如果我想播放/暂停视频，你知道该怎么做吗？
@J.Fun 我刚刚在控制台中尝试过，这两个功能都适用于我使用 document.getElementById("videoid").play(); ——你的意思是不允许？如果您遇到问题，我建议您提出一个新问题。
我的意思是，它提醒我一个错误：TS2339：在 PhpStorm 中编译 typescript 时，类型 'HTMLElement' 上不存在属性 'play'。尽管它实际上可以在我的浏览器中使用。报错信息还是很烦，不知道怎么去掉。
我认为您需要将其转换为正确的类型（HTMLVideoElement）。像这样： document.getElementById("videoid") 发生错误是因为它将元素视为通用 HTMLElement。 JavaScript 不在乎，但 TS 有额外的检查来确保类型安全

标签： html typescript angular

【解决方案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 访问持续时间

【讨论】：

两种方法都有效，谢谢！虽然进行了较小的编辑，但在您的示例中它将是 $event.target

【解决方案2】：

<html ng-app="VideoLink">    

<body ng-controller="linkvideo">
    <video controls>
        <source src={{video}} type="video.mp4">
    </video>
</body>
</html>

在控制器文件中

var videolink=angular.module('VideoLink',[]);

    videolink.controller('linkvideo',function($scope){      
    $scope.video={'name':'https://www.youtube.com/watch?v=R7GLYhJ51uo'}
    });

试试吧，可能对你有帮助

【讨论】：

感谢您的回答，我正在寻找 Angular2 解决方案