Angular2、Zones 與 ChangeDetectorRef 以強制對接收到的數據進行 ui 更新

Question

我有一個 Angular2 應用程序。 它連接到 SignalR 服務並接收定期更新（每 10 秒）。 這些更新從 angualr 服務通過發射器發送到組件。 我注意到當新數據進來時用戶界面並不總是更新，有時會有 10 秒左右的延遲。

為了解決這個問題，我在組件中添加了對 detectChanges() 的調用...

this._signalrService.onGetData.subscribe((data: any) => {
            // update some data properties
            this._cd.detectChanges();
        });

我也使用區域來實現同樣的事情......

this._signalrService.onGetData.subscribe((data: any) => { 
            this._ngZone.run(() => {
            // update some data properties
            });
        });

基本上我想在組件接收數據時強制進行 ui 更新。

這兩種方法中的任何一種都正確嗎？ 該區域應該放在其他地方嗎？

Answer 1

我認為這是正確的方法。

• 當更新是包含問題中代碼的組件的本地更新時，使用this._cd.detectChanges

• 當更新也影響其他組件時使用this._ngZone.run(...) 。 一個常見的例子是使用router.navigate(...)

• 也可以使用ApplicationRef.tick()代替this._ngZone.run(...) 。 它會導致運行整個應用程序的更改檢測。