访问 Angular2 JavaScript ES5 组件中的元素

Posted 2023-02-23

【中文标题】访问 Angular2 JavaScript ES5 组件中的元素

【英文标题】：Accessing element in an Angular2 JavaScript ES5 component

【发布时间】：2016-04-10 15:01:51

【问题描述】：

编辑：到目前为止，大多数 cmets 都给了我 TypeScript 解决方案，我觉得我需要在这里重复一下：使用 javascript ES5。

我想创建一个画布组件，在其中根据绑定的属性绘制数据。如何在 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 = ));

【问题讨论】：

Access a local variable from the template in the controller in Angular2的可能重复

谢谢，但这似乎提供了 TypeScript 解决方案？标签和标题状态 JavaScript (ES5)

好的，我会写它作为答案。

检查答案是否对您有帮助。

【参考方案1】：

我引用的 TS solution 和 ES5 之间的唯一区别是你调用 ViewChild 的方式

虽然使用 TS 可以直接使用注解 @ViewChild，但在 ES5 中你必须在 Component 中使用 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 可以帮助你更多地了解它的用法。

【参考方案2】：

给元素添加一个模板变量（'#canvas'）

template: '<div><canvas #canvas id="randomId"></canvas></div>'

使用@ViewChild注解

@ViewChild('canvas') canvas;

实现AfterViewInit 并在调用ngAfterViewInit() 之后，canvas 字段被初始化为ElementRef。使用canvas.nativeElement，您可以访问<canvas> 元素。

【参考方案3】：

我不确定非 Typescript 语法是什么，但我相信你自己也知道。

这就是我的做法：

export class Navigation 

    constructor(elementRef: ElementRef) 
        // elementRef.nativeElement is the actual element
    

【讨论】：

谢谢，但我的实际问题是将其翻译成 JavaScript (ES5)