Question

我正在尝试将Angular2与jQuery + Chosen插件结合使用。它基本上是这个问题的答案的延伸How to use jQuery with Angular2?。

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

这意味着，如果我这样做：

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

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

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

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

它似乎确实有所帮助，但我想知道这是正确的方法还是只是巧合才有效？
我认为在他们的视图更新后调用的组件可能会有一些事件，但看起来他们都没有做我需要的事情。

编辑：在另一个问题中很好地描述了同样的问题：Triggering Angular2 change detection manually。

Answer 1

this.items.push(...)似乎是由在Angulars区域外运行的代码调用的。 Angular在一个区域内运行，在该区域内，大多数异步API都被修补（events，setTimeout，...），以通知Angular必要的变更检测。

如果代码在该区域之外运行，则Angular不会收到有关已完成的异步执行的通知，并且不会发生更改检测。如果您在setTimeout(...)内运行代码，则在呼叫完成时运行更改检测。

有关进行Angular运行更改检测的其他方法，请参阅Triggering Angular2 change detection manually。