我正在尝试注入一个包含(click)
事件到 Angular2 模板中。加载 DOM 后很久,就会从后端动态检索字符串。 Angular 无法识别注入的内容也就不足为奇了(click)
event.
示例模板:
<div [innerHTML]="test"></div>
后端给出的示例字符串:
var test = "When ready, <span (click)=\"itemClick($event)\">click me</span>."
Angular 组件中的函数调用示例:
itemClick(event) {
debugger;
}
My next guess would be to try having Angular subscribe or catch a plain-old javascript event, so the string would then be:
var test = "When ready, <span onClick=\"itemClick($event)\">click me</span>."
果然,我收到一个错误itemClick is not defined
,所以我知道它正在寻找那个 javascript 函数。
所以问题:我怎样才能让 Angular2 订阅这个事件或函数?
声明性事件绑定仅在组件模板的静态 HTML 中受支持。
如果要订阅动态添加的元素的事件,则需要强制执行。
elementRef.nativeElement.querySelector(...).addEventListener(...)
或类似的。
如果你想保证 WebWorker 安全,你可以注入Renderer
constructor(private elementRef:ElementRef, private renderer:Renderer) {}
并使用
this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);});
注册事件处理程序。
也可以看看在 Angular 2 中动态添加事件监听器 https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)