Angular2 - 在动态添加的HTML中捕获/订阅(单击)事件

Question

我正在尝试将包含(click)事件的字符串注入Angular2模板.在加载DOM之后,很多字符串是从后端动态检索的.毫不奇怪Angular不会识别注入的(click)事件.

示例模板:

<div [innerHTML]="test"></div>

后端给出的示例字符串:

var test = "When ready, <span (click)=\"itemClick($event)\">click me</span>."

Angular组件中的函数调用示例:

itemClick(event) {
   debugger;
}

---

我的下一个猜测是尝试使用Angular订阅或捕获一个普通的javascript事件,因此该字符串将是:

var test = "When ready, <span onClick=\"itemClick($event)\">click me</span>."

果然,我得到一个错误itemClick is not defined,所以我知道它正在寻找那个javascript函数.

所以问题:我怎样才能让Angular2订阅这个事件或函数？

Answer 1

声明性事件绑定仅在组件模板中的静态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中动态添加事件侦听器