Angular

實(shí)現(xiàn)

首先實(shí)現(xiàn)方式不用多說(shuō)，使用鉤子函數(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)操作最好寫(xiě)在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

開(kāi)發(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等值都還沒(méi)綁定
• 任何的變更檢測(cè)都會(huì)觸發(fā)ngDoCheck，詳見(jiàn) 非常消耗性能，需要小心使用

Ionic

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

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

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

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

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

先調(diào)用ionViewWillLeave，直到成功過(guò)渡到新頁(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è)面過(guò)渡也比較平滑。

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

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

路由守衛(wèi)

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

總結(jié)

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