访问Angular2 JavaScript ES5组件中的元素
发布时间:2020-12-17 07:13:01 所属栏目:安全 来源:网络整理
导读:编辑:由于大多数评论迄今为止给了我的TypeScript解决方案,我觉得我需要重复一遍:使用 JavaScript ES5. 我想创建一个canvas组件,其中我根据bound属性绘制数据.如何使用JavaScript在Angular2中执行此操作? 我使用角度1的方法是在指令中获取元素引用,但是我
编辑:由于大多数评论迄今为止给了我的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可以帮助您更多地了解其用途. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |