javascript - 如何使用字符串创建 DOM 元素来使 Angular 单击绑定(bind)起作用？

Question

我应该如何在动态添加的 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中工作？

Answer 1

您可以动态构建组件，如 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) {
  }
}