組件的視圖在Angular2中更新時的事件

-1

我試圖將Angular2與jQuery + Chosen插件組合在一起。它基本上是對這個問題的回答的延伸How to use jQuery with Angular2?。組件的視圖在Angular2中更新時的事件

我想動態更新顯示在選定的選擇框中的項目。 Chosen已爲此設計了chosen:updated事件設計，但我需要在組件視圖更新後觸發它，因爲Chosen只查看<option>元素並根據它們生成其內容。

你可以看到現場的「工作」演示：http://plnkr.co/edit/42RaphKFHPNrNYuWlrbe?p=preview

這意味着，如果我這樣做：

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。

更新工作演示：http://plnkr.co/edit/w7hHmUaD9Eqq3ffQueXp?p=preview

來源

2016-02-26 martin

this.items.push(...)似乎由Angulars區外運行的代碼來調用。角度運行在一個區域內，並在該區域內的大多數異步API修補（事件，setTimeout，...）來通知Angular有關必要的更改檢測。

如果代碼在該區域之外運行，則Angular不會收到關於完成的異步執行的通知，並且不會發生更改檢測。如果您在setTimeout(...)內運行代碼，則在呼叫完成時運行更改檢測。

請參閱Triggering Angular2 change detection manually瞭解其他如何進行角度變化檢測的方法。

來源

2016-02-26 08:41:39

我覺得'this.items.push（）'在區域內運行，因爲它是由'（click）'事件調用的。我曾嘗試過使用'NgZone'，但我的用例不同，我需要在更改檢測後調用一個函數。 – martin

您鏈接的答案正是我在找的東西：http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually – martin

組件的視圖在Angular2中更新時的事件

回答

相關問題