從 runOutsideAngular 上下文調用 ChangeDetectorRef.detectChanges。 可以嗎？

Question

可以從NgZone.runOutsideAngular上下文調用ChangeDetectorRef.detectChanges嗎？ 我有通過WebSocket接收數據的角度應用程序。 Websocket 數據流非常密集，因此我將其包裝到NgZone.runOutsideAngular中。 各種服務訂閱 websocket 數據，處理它並報告它們自己的事件 ( Observables )。 它們在角區外觸發。 Angular 組件訂閱它們並在事件處理程序（觀察者）中調用ChangeDetectorRef.detectChanges 。 在大多數情況下，這可以正常工作。 但在某些情況下，它會帶來麻煩：ngFor 可能會在角度區域之外創建新的元素/組件。 此類組件的事件處理程序將觸發超大角度。 我知道我可以將它們包裝到NgZone.run調用中，但這會導致我想避免的全局變化檢測。

UPDATE1：我創建示例來演示該問題： https ://stackblitz.com/edit/angular-5-change-detection-in-runoutsideangular-context 添加一些項目，然后嘗試使用x按鈕將其刪除。

Answer 1

事實上，您不應該在角度區域之外運行ChangeDetectorRef.detectChanges因為如果在檢查期間創建任何組件，這些組件將超出角度區域，將不會處理常見事件。

作為我的問題的解決方案，我在短時間內（ NgZone.run ）累積事件，然后在單個NgZone.run調用中處理它們。

Answer 2

那很完美。 這是您優化變更檢測所做的工作。 擁有 OnPush 策略系統將優化性能，但大多數時候問題是變化檢測觸發得太頻繁。

假設您有一個拖放組件。 當用戶拖動時，您不希望每秒全局觸發 10 次更改檢測。 所以你會想在外部區域運行它。 話雖如此，您可能希望觸發該特定組件的更改檢測，因此您可以使用detectChanges()

我寫過一些文章，其中在外部區域運行detectChanges()將大大提高應用程序的性能：

• https://blog.simplified.courses/angular-performant-drag-and-drop-with-rxjs/
• https://blog.simplified.courses/running-outputs-outside-zonejs-for-angular-performance-optimization/