Angular4學習筆記——生命周期鉤子

fizz 發布于2019-08-21 17:48 / 2192人閱讀

摘要：所以如果需要使用生命周期，只要在我們的代碼中寫上鉤子函數即可，會找到并調用像這樣的鉤子方法，有沒有接口無所謂。當使用構造函數新建一個組件或指令后，就會按下面的順序在特定時刻調用這些生命周期鉤子方法用處當設置數據綁定輸入屬性發生變化時響應。

接口和鉤子

在介紹生命周期的相關概念之前，可以先復習一下TypeScript對于接口的概念。
在這里主要使用的是類接口及其實現：

interface ClockInterface {
    currentTime: Date;
}
// 該寫法表示明確的強制一個Clock類符合ClockInterface接口
// 該接口中currentTime是一個Date類型的數據（并沒有實際使用），創造Clock實例時需要傳入參數h和m，都是數字類型。
class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

在Angular中，也針對生命周期的不同時刻給予了一些接口，你可以在代碼中強制自己的組件/指令在創建時實現這些接口。
而每個接口都有唯一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構成的。比如，OnInit接口的鉤子方法叫做ngOnInit，Angular在創建組件后立刻調用它。

接口是可選的？

由于我們最終執行的代碼是JavaScript,而在JS中是沒有接口概念的，接口只是用來強化類的概念，經過編譯之后接口消失了。
所以如果需要使用生命周期，只要在我們的代碼中寫上鉤子函數即可，Angular會找到并調用像ngOnInit()這樣的鉤子方法，有沒有接口無所謂。
但是最好在寫代碼的時候不要省去接口，享受TypeScript所帶來的強類型好處~~~

生命周期的順序

指令和組件的實例有一個生命周期：新建、更新和銷毀。
當Angular使用構造函數新建一個組件或指令后，就會按下面的順序在特定時刻調用這些生命周期鉤子方法：

ngOnChanges()

用處：當Angular設置數據綁定輸入屬性發生變化時響應。
時機：當被綁定的輸入屬性的值發生變化時調用，不過首次調用是會發生在ngOnInit()之前的。
ngOnChanges()方法獲取了一個對象，它可以同時觀測1個/多個綁定的屬性值，它把每個發生變化的屬性名都映射到了一個SimpleChange對象，該對象中有屬性的當前值和前一個值。

// Angular定義SimpleChanges類構造函數三個參數分別為上一個值，當前值和是否第一次變化(firstChange: boolean)，這些changes都可以調用。
ngOnChanges(changes: SimpleChanges) {
  ... some code about changes here...
}

ngOnInit()

用處：在Angular第一次顯示數據綁定和設置指令/組件的輸入屬性之后，初始化指令/組件。
時機：在第一輪ngOnChanges()完成之后調用，只調用一次。
要明確一點就是，雖然接口中有一個constructor構造函數，但是在這里最好只對局部變量進行初始化之外什么都不做，通過ngOnInit()獲取初始數據，而且是放在構造函數后面。

ngDoCheck()

用處：檢測那些Angular自身無法捕獲的變更
時機：在每個Angular變更檢測周期中調用，ngOnChanges()和ngOnInit()之后。
謹慎使用，因為一些你意想不到的事情也會被視為變更了

ngAfterContentInit()和ngAfterContentChecked()

只適用于組件
用處：在外來內容被投影到組件中之后/投影組件內容的變更檢測之后調用
時機：
ngAfterContentInit()--第一次ngDoCheck()之后調用，且只調用一次；
ngAfterContentChecked()--每次ngDoCheck()之后調用，如果需要調用ngAfterContentInit()，則在ngAfterContentInit()調用之后

ngAfterViewInit()和ngAfterViewChecked()

只適用于組件
用處：初始化完/檢測變更完組件視圖及其子視圖之后調用。
時機：跟相應的content鉤子類似，在對應的content鉤子后面。

ngOnDestroy

用處：反訂閱可觀察對象和分離事件處理器，以防內存泄漏
時機：銷毀指令/組件之前調用并清掃

釋放那些不會被垃圾收集器自動回收的各類資源的地方。取消那些對可觀察對象和DOM事件的訂閱。停止定時器。注銷該指令曾注冊到全局服務或應用級服務中的各種回調函數。

GPU云服務器云服務器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90042.html

angular4學習記錄 -- 組件通訊、生命周期

摘要：每完成被投影組件內容發生變化時調用。每次做完組件視圖和子組件視圖的變更檢測之后調用。組件銷毀時調用，主要用于內存回收。策略策略是當組件的輸入屬性發生變更時才會檢查當前組件及其子組件。 angular4 組件通訊、生命周期主要通訊形式父組件通過屬性綁定到子組件，子組件通過事件傳遞參數到父組件父組件通過局部變量獲取子組件的引用父組件使用@ViewChild獲取子組件的引用兩個不...

shadajin 2019-08-21 16:45 評論0 收藏0
Angular4學習筆記——組件之間的交互

摘要：具體思路子組件暴露一個屬性，當事件發生時，子組件利用該屬性向上彈射事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。父子組件通過各自的構造函數注入該服務。通過輸入型綁定把數據從父組件傳到子組件 Angular對于父組件 => 子組件的數據通信做法和Vue很相似。 // 父組件html模板 // 子組件接收數據 i...

Guakin_Huang 2019-08-21 17:48 評論0 收藏0
Vue2.5筆記：Vue的實例與生命周期

摘要：總結這邊文章主要是介紹了下的實例與生命周期，在實例化的過程中我們可以添加許多可選對象，比如生命周期鉤子函數等，讓實例產生我們想要的行為。理解與認識 Vue 的實例是我們學習 Vue 非常重要的一步，也是非常必須的，因為實例是它的一個起點，也是它的一個入口，只有我們創建一個 Vue 實例之后，我們才行利用它進行一些列的操作。首先 Vue 沒有完全遵守 MVVM 的架構模式，但是它的設...

Ashin 2019-08-23 12:10 評論0 收藏0
vue入門筆記體系（二）vue生命周期

摘要：此時還未有選項鉤子函數和間的生命周期完成后，會有一個判斷過程，判斷對象是否有選項。鉤子函數和鉤子函數間的生命周期當發現中的數據發生了改變，會觸發對應組件的重新渲染，先后調用和鉤子函數。和鉤子函數間的生命周期鉤子函數在實例銷毀之前調用。 vue生命周期這是vue生命周期的圖示具體內容：showImg(https://segmentfault.com/img/bV4xju?w=1200&...

scola666 2019-08-23 10:30 評論0 收藏0
Angular2 VS Angular4 深度對比：特性、性能

摘要：的特性和性能是的超集，用于幫助的開發。注解提供了連接元數據和功能的工具。通過在庫中提供基本信息可以調用函數或創建類的實例來檢查相關元數據，從而簡化了對象實例的構建。停用它會響應跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應用開發領域，Angular被認為是最好的開源JavaScri...

孫淑建 2019-08-20 18:37 評論0 收藏0