Angular2 - 在动态添加的HTML中捕获/订阅（点击）事件 [英] Angular2 - catch/subscribe to (click) event in dynamically added HTML

问题描述

我正在尝试在Angular2模板中注入一个包含（点击）事件的字符串。在DOM加载后，该字符串从后端动态检索。没有惊喜，Angular将无法识别注入的（点击）事件。

I'm attempting to inject a string that contains a (click) event into the Angular2 template. The string is dynamically retrieved from the back-end much after the DOM is loaded. No surprise here that Angular won't recognize the injected (click) event.

示例模板：

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

从后端给出的示例字符串：

Example string given from back-end:

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

角度组件中的示例函数调用：

Example function call in the Angular component:

itemClick(event) {
   debugger;
}

---

我的下一个猜测是尝试有角度订阅或抓住一个简单的JavaScript事件，所以字符串将是：

---

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未定义，所以我知道它正在寻找这个javascript函数。

Sure enough, I get an error that itemClick is not defined, so I know it's looking for that javascript function.

所以问题：如何让Angular2订阅这个事件或功能？

So question: How can I get Angular2 to subscribe to this event or function?

推荐答案

声明式事件绑定仅在组件模板的静态HTML中支持。

如果您想要订阅动态添加的元素的事件，您需要强制执行。

Declarative event binding is only supported in static HTML in a components template.
If you want to subscribe to events of elements dynamically added, you need to do it imperatively.

elementRef.nativeElement.querySelector(...).addEventListener(...)

或类似。

如果要保护WebWorker，您可以注入 Renderer

If you want to be WebWorker-safe, you can inject the Renderer

constructor(private elementRef:ElementRef, private renderer:Renderer) {}

并使用

this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);});

注册一个事件处理程序。

to register an event handler.

另请参见在角度2中动态添加事件侦听器

这篇关于Angular2 - 在动态添加的HTML中捕获/订阅（点击）事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！