Angular

實(shí)現(xiàn)

首先實(shí)現(xiàn)方式不用多說，使用鉤子函數(shù)需要在定義的時(shí)候?qū)崿F(xiàn)對應(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í)會觸發(fā)。
另外如果@Input是對象，只有引用發(fā)生變化的情況下才會觸發(fā)。

3、ngOnInit

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

4、ngDoCheck

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

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等值都還沒綁定
• 任何的變更檢測都會觸發(fā)ngDoCheck，詳見 非常消耗性能，需要小心使用

Ionic

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

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

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

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

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

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

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

ionic是怎么處理頁面的生命周期的

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

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

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

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

路由守衛(wèi)

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

總結(jié)

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

最新評論