如何使用@ViewChild在我的组件中获取bradmartin/native-videoplayer元素参考

Question

引用github上的第三方播放器。

问题：

我如何使用ViewChild在组件中获得第三方nativecript-videoplayer的元素参考？

错误：

我的代码编译，但是当我尝试通过this.videoplayer.play((

访问该方法时崩溃

typeError：this.videoplayer.play不是一个函数。(在 'this.videoplayer.play(('，'this.videoplayer.play' 是未定义的(

代码：

player.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";
registerElement("VideoPlayer", () => require("nativescript-videoplayer").Video);
@Component({
    selector: "Player",
    moduleId: module.id,
    templateUrl: "./player.component.html",
    styleUrls: ["./player.component.css"]
})
export class PlayerComponent implements OnInit{
    @ViewChild("video_player") videoPlayer: Video;
    public src: string = "<YOUR VIDEO URL HERE>"
    ngOnInit(): void {
        this.videoPlayer.play();
    }
}

player.component.html

        <VideoPlayer
                #video_player
                [src]="src"
                height="300"></VideoPlayer>

github发行参考＃77

Answer 1

在检查this.videoPlayer的属性之后：

for(let prop in this.videoPlayer){
  if(this.videoPlayer.hasOwnProperty(prop)){
    console.dir(prop);
  }
}

我注意到它只有一个属性"本地元素"。为了能够使用它，我必须将viewChild类型从" Video"更改为" ElementRef"，这让我访问nativeElement，然后允许我访问文档中定义的所有API。

import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";
registerElement("VideoPlayer", () => require("nativescript-videoplayer").Video);
@Component({
    selector: "Player",
    moduleId: module.id,
    templateUrl: "./player.component.html",
    styleUrls: ["./player.component.css"]
})
export class PlayerComponent implements OnInit{
    @ViewChild("video_player") videoPlayer: ElementRef;
    public src: string = "<YOUR VIDEO URL HERE>"
    ngOnInit(): void {
        this.videoPlayer.nativeElement.play();
    }
}