Angular 2:如何从组件中控制<video>

fro*_*y22 4 angular

我正在尝试使用Angular 2,但冻结处理HTML 5视频.在我发现的手册中,可以在模板中使用:

<video #videoplayer></video>
Run Code Online (Sandbox Code Playgroud)

这应该创建局部变量"videoplayer",提供对视频元素的访问.可以从组件中获取它,例如:

@Component({
    selector: '<some>',
    template: '<video #videoplayer></video>'
})

export class SomeComponent {

   public videoplayer; // How can I got element object here?

   play() { // I need work with <video> in Component
      this.videoplayer.play();
   }
}
Run Code Online (Sandbox Code Playgroud)

感谢您的帮助,我尝试@Host它或像@Input一样使用它但仍然无法正常工作.

Gün*_*uer 5

@ViewChild('videoplayer') videoPlayer;
Run Code Online (Sandbox Code Playgroud)

ngAfterViewInit()你应该能够访问它.

或者,您可以绑定到属性

<video [someProp]="someField"></video>
Run Code Online (Sandbox Code Playgroud)

和事件

<video (someEvent)="someHandler($event)"></video>
Run Code Online (Sandbox Code Playgroud)