代碼塊中ts數據進行了更新,view視圖保持不變
可以引入angular4的 ChangeDetectorRef
//頁面引入所需模塊
import { ChangeDetectorRef } from '@angular/core';
//注入服務
constructor(public changeDetectorRef:ChangeDetectorRef ) {
該方法有以下幾種方法:
class ChangeDetectorRef {
markForCheck(): void
detach(): void
detectChanges(): void
checkNoChanges(): void
reattach(): void
}`
markForCheck()方法有時候在angular的zone之後。會不生效
detectChanges()
檢查一遍 變化檢測器 (change detector) 和它的子檢測器。可以配合 ChangeDetectorRef 來實現局部變化檢查。有些時候,對於更新頻繁數據量又很大的列表,我們不想 angular 在列表變化的時候馬上更新視圖,我們可以手動去調用 detectChanges 方法,去強制 angular 檢查 組件數據的變化。這樣一來,就可以實現自主控制視圖更新頻率,而不用擔心有太大的性能問題了。
checkNoChanges()
檢測該組件及其子組件,如果有變化存在則報錯,用於開發階段二次驗證變化已經完成。
detach()
從變化檢測樹中分離變化檢測器,該組件的變化檢測器將不再執行變化檢測,除非手動調用 reattach() 方法。當我們在組件上調用 ChangeDetectorRef 的 detach 方法之後,angular 在該組件數據發生變化的時候,不再執行更新視圖等操作。
reattach()
重新添加已分離的變化檢測器,使得該組件及其子組件都能執行變化檢測。讓 angular 在組件數據發生變化的時候重新檢測該組件的變化,在該組件數據變化的時候,執行如更新視圖的操作。
舉例:
if (value) {
this.ChangeDetectorRef.reattach();
} else {
this.ChangeDetectorRef.detach();
}
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();