一篇文章快速了解Angular和Ionic生命周期和鉤子函

目錄

Angular

實(shí)現

首先實(shí)現方式不用多說(shuō)，使用鉤子函數需要在定義的時(shí)候實(shí)現對應的接口

export class ListPage implements OnInit {
  constructor() {}

  ngOnInit() {
    // code here
  }
}

調用順序

1、constructor

最先執行的是構造函數，在執行構造函數的時(shí)候，@Input、@ViewChild等很多變量都是不存在的，相關(guān)操作最好寫(xiě)在ngOnInit里。

2、ngOnChanges

當前組件@Input/@Output的綁定值發(fā)生變化時(shí)會(huì )觸發(fā)。
另外如果@Input是對象，只有引用發(fā)生變化的情況下才會(huì )觸發(fā)。

3、ngOnInit

在第一次 ngOnChanges 完成后調用，只會(huì )執行一次

4、ngDoCheck

開(kāi)發(fā)者自定義變更檢測。

5、ngAfterContentInit

組件內容初始化的時(shí)候執行一次

6、ngAfterContentChecked

投射到組件的內容每次ngDoCheck調用后觸發(fā)。

7、ngAfterViewInit

組件及其子組件視圖初始化的時(shí)候執行一次

8、ngAfterViewChecked

組件及其子組件視圖每次ngDoCheck調用后觸發(fā)。

9、ngOnDestroy

在組件銷(xiāo)毀前調用。

注意

• 并不是所有的數據在constructor里都存在，@ViewChild @ViewChildren @Input等值都還沒(méi)綁定
• 任何的變更檢測都會(huì )觸發(fā)ngDoCheck， 非常消耗性能，需要小心使用

Ionic

原文檔可以點(diǎn)上面的鏈接看到，挑重點(diǎn)說(shuō)一下。

生命周期如圖，除了angular提供的生命周期，ionic添加了幾個(gè)事件：

• ionViewWillEnter 路由組件即將顯示到視圖
• ionViewDidEnter 路由組件已經(jīng)顯示到視圖

在ngOnInit之后觸發(fā)ionViewWillEnter，頁(yè)面切換的過(guò)渡效果結束之后觸發(fā)ionViewDidEnter

• ionViewWillLeave 即將離開(kāi)當前路由的組件
• ionViewDidLeave 已經(jīng)離開(kāi)當前路由的組件

先調用ionViewWillLeave，直到成功過(guò)渡到新頁(yè)面之后（在新頁(yè)面ionViewDidEnter觸發(fā)之后），ionViewDidLeave才被調用。

使用ion-nav或ion-router-outlet的組件不應使用OnPush變化檢測策略，這樣會(huì )導致ngOnInit之類(lèi)的生命周期hooks無(wú)法觸發(fā)。另外，異步變化的數據可能不能正確渲染。

ionic是怎么處理頁(yè)面的生命周期的

ionic使用的路由出口是<ion-router-outlet />，它拓展了angular的<router-outlet />，可以在移動(dòng)設備上有更好體驗。

從一個(gè)頁(yè)面跳轉到一個(gè)新頁(yè)面的時(shí)候，ionic會(huì )把舊頁(yè)面保存在dom中，并且從視圖上隱藏。這樣可以保持住上一個(gè)頁(yè)面的狀態(tài)，比如滾動(dòng)位置、頁(yè)面數據，這樣從新頁(yè)面返回到上一個(gè)頁(yè)面的時(shí)候，就不用重新加載一次，頁(yè)面過(guò)渡也比較平滑。

頁(yè)面只有從堆棧中退出的時(shí)候，才會(huì )真正銷(xiāo)毀，所以ngOnInit 和ngOnDestroy 觸發(fā)的時(shí)機和想象中可能不太一樣。

比如A是詳情頁(yè)，進(jìn)入B頁(yè)面修改數據。修改完成后從B頁(yè)面返回A頁(yè)面。
如果A頁(yè)面的數據獲取方法是寫(xiě)在ngOnInit里的，那么從B返回到A的時(shí)候，因為ngOnInit是不會(huì )觸發(fā)的，顯然不符合業(yè)務(wù)要求。
所以這個(gè)數據的獲取可以寫(xiě)在ionViewWillEnter里，這樣從B返回A的時(shí)候就可以觸發(fā)并更新

路由守衛

Ionic 3里曾經(jīng)有過(guò)ionViewCanEnter 和ionViewCanLeave兩個(gè)鉤子函數，用來(lái)判斷頁(yè)面是否可以進(jìn)入/離開(kāi)，一般用來(lái)限制訪(fǎng)問(wèn)權限 或者離開(kāi)編輯頁(yè)面之前彈出二次確認提示。這兩個(gè)函數已經(jīng)廢棄了，Ionic 4以后使用angular官方的。

總結

到此這篇關(guān)于A(yíng)ngular和Ionic生命周期和鉤子函數的文章就介紹到這了,更多相關(guān)Angular Ionic生命周期和鉤子函數內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！