- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
Reference to the third party player on github.
如何使用 viewChild 在我的组件中获取第三方 nativescript-videoplayer 的元素引用?
错误:
我的代码可以编译,但当我尝试通过 this.videoPlayer.play() 访问播放方法时崩溃
TypeError: this.videoPlayer.play is not a function. (In 'this.videoPlayer.play()', 'this.videoPlayer.play' is undefined)
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>
最佳答案
通过以下方式检查 this.videoPlayer
的属性后:
for(let prop in this.videoPlayer){
if(this.videoPlayer.hasOwnProperty(prop)){
console.dir(prop);
}
}
我注意到它只有一个属性“nativeElement”。为了能够使用它,我必须将 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();
}
}
关于typescript - 如何使用@viewChild 在我的组件中获取 bradmartin/nativescript-videoplayer 元素引用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44803299/
我目前正在学习 angular ViewChild,但在使用 ViewChild 从 DOM 选择自定义引用变量时,我似乎遗漏了一些东西。 在我的模板中有两个表: 我正在尝试针对每个对象进行排序:
在我的组件中,我有以下内容: @ViewChild('PaginatedTableComponent') userTable: PaginatedTableComponent; 在这个组件中,我有以下
我正在使用父子组件。在子组件中,我使用搜索框。我需要随时按需获取搜索框值。如何获得? 子组件 html - GridViewComponent 父组件 ts @ViewChild(GridviewC
我有两个组件,一个 videoComponent 和 videoControlsComponent。视频组件包含 元素和视频组件有一些按钮来操作 videoComponent 元素。 You
我想在我的 HTML 中打印一个 10x10 的网格。为此,我在我的 html 中使用了两个 ngFor。在我的 TypeScript 组件中,我想使用 @ViewChild 访问此表的单元格以将光标
在我的 Angular 应用程序中,我的 @ViewChild 实例无法填充 HTL matSort。 我的组件.ts: import { MatSort } from '@angular/mater
基本上不是这样做: class Controller implements AfterViewInit{ @ViewChild(IconComponent) iconComponent: Ic
我已经检查了这个问题的其他答案,但到目前为止似乎没有任何帮助。我正在尝试在 ionic 2 应用程序中显示 map 。但是当我尝试选择 #map 时div 它返回未定义。这是代码 page1.html
出于某种原因,我的 Angular 5 应用程序中的 @ViewChild 无法正常工作。我在我的组件中这样定义它: case-detail.component.html: 我在我的 C
我有这样一个组件: export class ParentComponent implements OnInit, OnDestroy { @ViewChild(ChildComponent)
我有一个名为 EasyBoxComponent 的组件,和一个带有此 @Viewchild 的 @Directive: @ViewChild(EasyBoxComponent) myComponent
需要帮助来理解以下语句中 {read: ViewContainerRef} 的含义。 @ViewChild('myname', {read: ViewContainerRef}) target; 最佳
在以前的angular版本中,我们可以像这样定义一个带有元素ref的viewchild @ViewChild('fileInput') fileInput: ElementRef; 现在我们必须在构造
Angular v8 刚刚发布。虽然它主要是向后兼容的,但还是有一些突破性的变化。 根据 Angular 的 Changelog一个核心变化是(我引用): “在 Angular 版本 8 中,要求所有
我在使用 @ViewChild 和通过 ngIf 显示的组件时遇到问题。我找到了各种解决方案,但没有一个对我有用。 这是我的主要组件,由多个步骤(为了简洁起见,我只在代码中显示 2 个)和一个用于向前
我正在尝试获取 audio组件内的元素。起初我是用老式的方式做的: $player: HTMLAudioElement; ... ngOnInit() { this.$player = docum
这个问题已经有答案了: What are all the valid selectors for ViewChild and ContentChild? (2 个回答) 已关闭 4 年前。 在本文中C
如果我的 fileInput 元素在一个普通的 div 中,那么它工作正常。但是如果我把它放在 里面然后我得到它未定义。 这是我的代码: HTML Modal title
我目前正在开发一个项目,我需要根据组件传递一些@input值。因此,该指令将相应地发挥作用。但问题是我无法获得该指令的引用。相反,我只得到了 elementRef 作为返回。请参阅下面的 stackb
我是 angular2 的新手,并不专业。我有一个父子组件,当用户单击按钮时,我希望子组件的选择器显示一些内容。所以它应该是条件,并且它也是从子组件中使用的。这是我的代码:父级 HTML:
我是一名优秀的程序员,十分优秀!