如何用角度捕捉更新 DOM 事件？

【问题标题】：How to catch update DOM event with angular?如何用角度捕捉更新 DOM 事件？
【发布时间】：2016-10-29 09:11:51
【问题描述】：

我有表格，并且在 tablecell 中有 select2 控件。在ngAfterViewInit 方法中，我正在调用类似jQuery('.select2Class').select2(...); 我有可能在表中添加新行
现在代码类似于

addNewRow(){
    this.rows.push({name:'new row'});
    setTimeout(function(){
        jQuery('#newSelect2Id').select2(...);
    },10);
}

我需要使用setTimeout，因为没有事件angularReady。
我知道它不好，但我不知道如何正确地做到这一点。

【问题讨论】：

标签： angular select2

【解决方案1】：

不要像jQuery('#newSelect2Id').select2(...);那样直接使用jQuery，而是创建一个专用的自定义元素，例如<select2-input></select2-input>。

然后在组件模板中你将有正常的*ngFor 指令渲染行。像这样的：

<tr *ngFor="let row of rows">
  <td>
    <select2-input 
        [options]="select2Options"
        (select)="row.selectedOption = $even.value"
    ></select2-input>
  </td>
</tr>

现在，关于这个自定义元素的实现。最简单的实现就是实现OnInit 接口并使用$.fn.select2 插件初始化nativeElement。您还可以实现必要的输入和输出，就像在上面的示例中一样，您可能希望将一些 select2 选项传递给组件并对select2:select 事件作出反应。

【讨论】：