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

fizz 發(fā)布于2019-08-21 17:48 / 2208人閱讀

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

接口和鉤子

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

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

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

接口是可選的？

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

生命周期的順序

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

ngOnChanges()

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

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

ngOnInit()

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

ngDoCheck()

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

ngAfterContentInit()和ngAfterContentChecked()

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

ngAfterViewInit()和ngAfterViewChecked()

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

ngOnDestroy

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90042.html

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

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

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

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

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

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

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

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

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

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

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