我<video>在Angular2组件中有一个HTML5 元素.我需要访问它以便在允许用户将其共享到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")它来访问它,但似乎必须有更好的方法.
我已经成功地将 Angular 2（Alpha 44）与 D3.js 集成：
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
System.config({packages: {'app': {defaultExtension: 'js'}}});
System.import('app/app');
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
应用程序.js：
/// <reference path="./../../typings/tsd.d.ts" />
import {Component, bootstrap, ElementRef} from 'angular2/angular2';
@Component({
selector: 'my-app',
template: '<h1>D3.js Integrated if background is yellow</h1>',
providers: [ElementRef]
})
class AppComponent {
elementRef: ElementRef;
constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
}
afterViewInit(){
console.log("afterViewInit() called");
d3.select(this.elementRef.nativeElement).select("h1").style("background-color", "yellow");
}
}
bootstrap(AppComponent);
一切正常。但是 Angular 2 文档ElementRef说明如下： …