组件视图在 Angular2 中更新时的事件

Question

我正在尝试将 Angular2 与 jQuery + Chosen plugin. It's basically an extension of the answer to this question .

结合使用

我想动态更新选择 select 框中显示的项目。 Chosen 为此设计了 chosen:updated 事件，但我需要在更新组件视图后触发它，因为 Chosen 只查看 <option> 元素并根据它们生成其内容。

这意味着如果我这样做：

this.items.push('Another #' + this.items.length);
jQuery(this.el.nativeElement).find('select').trigger("chosen:updated");

它不会执行任何操作，因为在调用 this.items.push() 后视图尚未更新。

我尝试用 setTimeout 包装 trigger("chosen:updated") 以异步调用它，我认为这会有所帮助。

this.items.push('Another #' + this.items.length);
setTimeout(() => {
    jQuery(this.el.nativeElement).find('select').trigger("chosen:updated");
});

它似乎确实有帮助，但我想知道这是正确的方法还是只是巧合？
我认为组件的视图更新后可能会调用一些事件，但似乎 none 组件满足了我的需要。

编辑：同样的问题在另一个问题中有很好的描述：。

Answer 1

this.items.push(...) 似乎是由运行在 Angular 区域之外的代码调用的。 Angular 运行在一个区域内，并且在该区域内大多数异步 API 都已修补（事件、setTimeout、...）以通知 Angular 关于必要的更改检测。

如果代码运行在该区域之外，Angular 不会收到有关已完成异步执行的通知，也不会发生更改检测。如果您 setTimeout(...) 中的运行代码在调用完成时更改检测为运行。

有关进行 Angular 运行变化检测的其他方法，请参阅。

Event when component's view updated in Angular2