访问Angular2 JavaScript ES5组件中的元素

编辑：由于大多数评论迄今为止给了我的TypeScript解决方案,我觉得我需要重复一遍：使用 JavaScript ES5.

我想创建一个canvas组件,其中我根据bound属性绘制数据.如何使用JavaScript在Angular2中执行此操作？

我使用角度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 solution和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演示的用法.还有另一个answer可以帮助您更多地了解其用途.