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

问题描述

我正在尝试将包含 (click) 事件的字符串注入到 Angular2 模板中.在加载 DOM 之后，该字符串是从后端动态检索的.Angular 无法识别注入的 (click) 事件也就不足为奇了.

示例模板:

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

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

var test = "准备好后，<span (click)="itemClick($event)">点击我</span>."

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

itemClick(event) {调试器；}

<小时>我的下一个猜测是尝试让 Angular 订阅或捕获一个普通的 javascript 事件，因此字符串将是:

var test = "准备好后，点击我."

果然，我收到一个错误，指出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 中动态添加事件侦听器

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.

Example template:

<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;
}

---

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>."

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

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

解决方案

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(...)

or similar.

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

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

and use instead

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

to register an event handler.

see also Dynamically add event listener in Angular 2

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