angular的變更機制是什么

本篇內容主要講解“angular的變更機制是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“angular的變更機制是什么”吧!

一、什么是變更檢測

• 概括： 一種更改檢測機制，用于遍歷組件樹，檢查每個組件的變化，并在組件屬性發生變化的時候觸發DOM的更新。

• 變更檢測的基本任務： 獲得程序的內部狀態并使之在用戶界面可見。這個狀態可以是任何的對象、數組、基本數據類型。

二、什么引起了變更

事件驅動，來源有以下三大類:

• 事件：頁面 click、submit、mouse down……

• XHR：從后端服務器拿到數據

• Timers：setTimeout()、setInterval()

這幾點有一個共同點，就是它們都是異步的，也就是說，所有的異步操作是可能導致數據變化的根源因素，所以每當執行一些異步操作時，我們的應用程序狀態可能發生改變，而這時則需要去更新視圖

三、狀態變化怎么通知變更檢測

在Angular當中則接入了NgZone，由它來監聽Angular所有的異步事件，Angular 在啟動時會重寫（通過 Zone.js）部分底層瀏覽器 API（暴力的攔截了所有的異步事件）。

常見的有兩種方式來觸發變化檢測，一種方法是基于組件的生命周期鉤子

ngAfterViewChecked() {
    console.log('cluster-master.component cd');
  }

另一種方法是手動控制變化檢測的打開或者關閉，并手動觸發

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

三、Angular 變更檢測

Angular 的核心是組件化，組件的嵌套會使得最終形成一棵組件樹，Angular 的變化檢測可以分組件進行，每個組件都有對應的變化檢測器 ChangeDetector，可想而知這些變化檢測器也會構成一棵樹。
在 Angular 中每個組件都有自己的變化檢測器，這使得我們可以對每個組件分別控制如何以及何時進行變更檢測。

四、變更檢測策略

Angular還讓開發者擁有定制變化檢測策略的能力。

• default: 每次變更檢測都會引起組件的變更檢測，包括其他組件的狀態變化，以及本組件引用型變量內部屬性值變化

• Onpush: 每次變更檢測會跳過本組件的變更檢查，除非滿足一些條件

4.1 default

Angular 默認的變化檢測機制是 ChangeDetectionStrategy.Default，每次異步事件 callback 結束后，NgZone會觸發整個組件樹 至上而下做變化檢測

4.2 onPush

OnPush 策略，用以跳過某個 component 以及它下面所有子組件的變化檢測

其實在設置了 OnPush 策略以后，還是有許多方法可以觸發變更檢測的；

• 1）組件的 @Input 屬性的引用發生變化。

• 2）組件內的 DOM 事件，包括它子組件的 DOM 事件，比如 click、submit、mouse down。

• 3）組件內的 Observable 訂閱事件，同時設置 Async pipe。

• 4）組件內手動使用 ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 方法

五、變化檢測對象引用

• markForCheck()：使用于子組件，將該子組件到根組件之間的路徑標記起來，通知 angular 檢測器下次變化檢測時一定檢查此路徑上的組件，即使設置了變化檢測策略為 onPush

• detectChanges()：手動發起該組件到各個子組件的變更檢測

• detach()：將組件的檢測器從檢測器數中脫離，不再受檢測機制的控制，除非重新 attach 上

• reattach()：把脫離的檢測器重新鏈接到檢測器樹上

到此，相信大家對“angular的變更機制是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！