angular的變更機制是什么

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

成都創新互聯公司專業為企業提供乾安網站建設、乾安做網站、乾安網站設計、乾安網站制作等企業網站建設、網頁設計與制作、乾安企業網站模板建站服務,10多年乾安做網站經驗,不只是建網站,更提供有價值的思路和整體網絡服務。

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的變更機制是什么”有了更深的了解,不妨來實際操作一番吧!這里是創新互聯網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

文章標題:angular的變更機制是什么
網頁URL:http://m.kartarina.com/article4/gespoe.html

成都網站建設公司_創新互聯,為您提供網站改版定制網站標簽優化電子商務網站營銷企業網站制作

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都網站建設公司
主站蜘蛛池模板: 无码中文av有码中文a| 亚洲精品无码AV人在线播放| 亚洲AV无码专区国产乱码4SE| 亚洲AV永久无码精品| 亚洲国产精品无码专区| 蜜桃成人无码区免费视频网站| 噜噜综合亚洲AV中文无码| 亚洲人成人无码网www电影首页| 无码成人精品区在线观看| 中文字幕精品无码亚洲字| 亚洲日韩av无码中文| 在线播放无码后入内射少妇| 亚洲另类无码专区丝袜| 亚洲AV无码国产丝袜在线观看 | 亚洲AV无码精品无码麻豆| 亚洲性无码一区二区三区| 亚洲爆乳无码专区| av无码精品一区二区三区四区 | 少妇性饥渴无码A区免费| 人妻少妇精品无码专区二区| 免费无码专区毛片高潮喷水| 亚洲AV无码无限在线观看不卡 | 亚洲欧洲免费无码| 亚洲人成人无码网www电影首页| 日韩久久无码免费毛片软件 | 熟妇人妻AV无码一区二区三区| 一本一道中文字幕无码东京热| 亚洲av无码专区在线观看亚| 久久精品中文无码资源站| 亚洲AV永久青草无码精品| 一本无码中文字幕在线观| 免费无码H肉动漫在线观看麻豆| 好爽毛片一区二区三区四无码三飞| 亚洲精品无码久久久久久久 | 丰满日韩放荡少妇无码视频| 午夜亚洲av永久无码精品| 国产精品无码一二区免费 | 91精品日韩人妻无码久久不卡| 亚洲国产精品无码专区| 日韩国产成人无码av毛片| 无码中文字幕日韩专区|