Edit:由于到目前为止大多数评论都给了我TypeScript解决方案,我觉得我需要在这里重复:使用JavaScriptES5。
我想创建一个画布组件,在那里我基于绑定属性绘制数据。如何在Angular2中使用JavaScript实现这一点?
我使用Angular 1的方法是在指令中获得元素引用,但我现在不知道应该如何做到这一点。
这是一种似乎有效的方法,但做完后我想洗手:
(function (app) {
app.DrawingComponent = ng.core
.Component({
selector: 'my-drawing',
template: '<div><canvas id="{{randomId}}"></canvas></div>'
})
.Class({
constructor: function () {
this.randomId = "canvas" + Math.random();
},
ngAfterViewInit: function() {
var canvas = document.getElementById(this.randomId);
console.log(canvas);
}
});
})(window.app || (window.app = {}));
我引用的TS解决方案和ES5之间的唯一区别是调用ViewChild
的方式
使用TS时,您可以直接使用注释@ViewChild
,而在ES5中,您必须使用组件中的queries
参数
app.DrawingComponent = ng.core
.Component({
selector: 'my-drawing',
template: '<div><canvas #myCanvas></canvas></div>',
// Check here! This is important!
queries : {
myCanvas : new ng.core.ViewChild('myCanvas')
}
})
.Class({
constructor: function () {},
ngAfterViewInit: function() {
console.log(this.myCanvas);
}
});
这是一个演示用法的plnkr。还有另一个答案可以帮助你更多地了解它的用法。
将模板变量('#canvas')添加到元素
template: '<div><canvas #canvas id="{{randomId}}"></canvas></div>'
使用@ViewChild
注释
@ViewChild('canvas') canvas;
实现AfterViewInit
,并且在调用ngAfterViewInit()
之后,用ElementRef
初始化canvas
字段。使用canvas.nativeElement
,您可以访问<canvas>
元素。
我不确定非Typescript语法是什么,但我相信你自己也知道。
我就是这样做的:
export class Navigation {
constructor(elementRef: ElementRef) {
// elementRef.nativeElement is the actual element
}
}