我应该如何在动态添加的 DOM 元素上进行 Angular 绑定(bind)?我正在使用 ag-grid (ng2)
作为数据表。
根据某些条件,我使用不同的列渲染。
columnDef.cellRenderer = function (params) {
return `<div><i class='fa ${params.value}'></i></div>`;
};
在此,我想向图标添加点击功能,如下所示:
columnDef.cellRenderer = function (params) {
return `<div><i (click)='iconClicked()' class='fa ${params.value}'></i></div>`;
};
如何使这些点击绑定(bind)
在Angular 2
中工作?
最佳答案
您可以动态构建组件,如 Equivalent of $compile in Angular 2 中所述。能够通过 Angular 事件和值绑定(bind)传递 HTML。
或者您可以使用命令式事件绑定(bind)
export class MyComponent {
constructor(private elRef:ElementRef) {}
someMethod() {
columnDef.cellRenderer = (params) => {
return `<div><i id="addClick" class='fa ${params.value}'></i></div>`;
this.elRef.nativeElement.querySelector('#addClick')
.addEventListener('click', this.iconClicked.bind(this));
};
}
iconClicked(e) {
}
}
关于javascript - 如何使用字符串创建 DOM 元素来使 Angular 单击绑定(bind)起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41788634/