javascript - 如何将Angular 4(单击)事件绑定(bind)到动态创建的div

以下代码部分为我创建了一个div块。

var addOns = '';
addOns = '<div class="divcl"><i class="fa fa-refresh" id="'+self.data.id+'" (click)="addTab($event)"></i></div>';
return "<div class='node' id='"+this.data.id+"'>"+addOns+"</div>";

但是事实证明，Angular无法识别addTab（event）函数。
我的问题是如何将Angular click事件绑定到动态创建的div。

最佳答案

您可以做的是创建一个实际的HTMLElement并向其中添加一个eventListener，然后使用appendChild将其添加到DOM中。

let addOns = document.createElement('div');
addOns.className ="divcl";
addOns.innerHTML = '<i class="fa fa-refresh" id="'+this.data.id+'"></i>';
this.renderer.listen(addOns, 'click', (event) => {
  this.addTab(event);
})

let node = document.createElement('div');
node.className = 'node';
node.id = this.data.id;
node.appendChild(addOns)

document.querySelector('#stuff').appendChild(node);

https://stackblitz.com/edit/angular-7dffje?file=app%2Fapp.component.ts

关于javascript - 如何将Angular 4(单击)事件绑定(bind)到动态创建的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49825267/