angular2 ChangeDetectorRef (變化檢測器的引用)手動控制組件的變化檢測行為

Angular檢測機制

　　監測到異步事件后是怎么判斷是否需要更新視圖呢？其實比較簡單，Angular通過臟檢查來判斷是否需要更新視圖。臟檢查其實就是存儲所有變量的值，每當可能有變量發生變化需要檢查時，就將所有變量的舊值跟新值進行比較，不相等就說明檢測到變化，需要更新對應視圖。當然，實際情況肯定不是這么簡單，Angular會通過自己的算法來對數據進行檢查，對算法感興趣的可以參考這篇文章-Angular的臟檢查算法。
　　Angular 應用是一個響應系統，首次檢測時會檢查所有的組件，其他的變化檢測則總是從根組件到子組件這樣一個從上到下的順序開始執行，它是一棵線性的有向樹，任何數據都是從頂部往底部流動，即單向數據流。

如何手動執行變更檢測

從@angular/core引入AfterViewInit, ChangeDetectorRef。注入ChangeDetectorRef對象

constructor(private todoService:TodoService, private cdr: ChangeDetectorRef){}

它提供了以下方法供我們調用：

class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

• markForCheck() - 在組件的 metadata 中如果設置了 changeDetection: ChangeDetectionStrategy.OnPush 條件，那么變化檢測不會再次執行，除非手動調用該方法。
  • 　　

    @Component({
      selector: 'app-refer',
      templateUrl: './refer.component.html',
      styleUrls: ['./refer.component.css'],
      changeDetection: ChangeDetectionStrategy.OnPush
    })

     

• detach() - 從變化檢測樹中分離變化檢測器，該組件的變化檢測器將不再執行變化檢測，除非手動調用 reattach() 方法。
• reattach() - 重新添加已分離的變化檢測器，使得該組件及其子組件都能執行變化檢測
• detectChanges() - 從該組件到各個子組件執行一次變化檢測

　　手動設置變更檢測：

ref.detach();
setInterval(() => {
 this.ref.detectChanges();
}, 5000);

 

詳情鏈接：https://www.jianshu.com/p/6bef681a0cae