快捷導(dǎo)航

一篇文章快速了解Angular和Ionic生命周期和鉤子函數(shù)

更新時(shí)間：2021年07月12日 12:00:19 作者：MMMMQI

Ionic以AngularJS和ApacheCordova為基礎(chǔ),使用Node.js進(jìn)行模塊管理，使用Html5、Css(SASS)和Javascript技術(shù)進(jìn)行APP開發(fā),這篇文章主要給大家介紹了如何通過一篇文章快速了解Angular和Ionic生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下

Angular

實(shí)現(xiàn)

首先實(shí)現(xiàn)方式不用多說，使用鉤子函數(shù)需要在定義的時(shí)候?qū)崿F(xiàn)對(duì)應(yīng)的接口

export class ListPage implements OnInit {
  constructor() {}

  ngOnInit() {
    // code here
  }
}

調(diào)用順序

1、constructor

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

2、ngOnChanges

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

3、ngOnInit

在第一次 ngOnChanges 完成后調(diào)用，只會(huì)執(zhí)行一次

4、ngDoCheck

開發(fā)者自定義變更檢測(cè)。

5、ngAfterContentInit

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

6、ngAfterContentChecked

投射到組件的內(nèi)容每次ngDoCheck調(diào)用后觸發(fā)。

7、ngAfterViewInit

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

8、ngAfterViewChecked

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

9、ngOnDestroy

在組件銷毀前調(diào)用。

注意

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

Ionic

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

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

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

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

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

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

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

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

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

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

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

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

路由守衛(wèi)

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