访问Angular2 JavaScript ES5组件中的元素

Accessing element in an Angular2 JavaScript ES5 component

本文关键字：元素 组件 ES5 Angular2 JavaScript 访问      更新时间：2023-09-26

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
    }
}
相关文章：