如何使用 angular 捕获更新 DOM 事件？

Question

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

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

我需要使用 setTimeout 因为没有事件 angularReady。
我知道它不好，但我不知道该怎么做。

Answer 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 事件做出反应。

如何使用 angular 捕获更新 DOM 事件？

How to catch update DOM event with angular?

select2

angular