如何将Angular 4（单击）事件绑定到动态创建的div

Question

以下代码部分为我创建了一个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。

Answer 1

您可以做的是创建一个实际的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