一篇文章快速瞭解Angular和Ionic生命週期和鉤子函式
目錄
- Angular
- 實現
- 呼叫順序
- 注意
- Ionic
- ionic是怎麼處理頁面的生命週期的
- 路由守衛
- 總結
Angular
實現
首先實現方式不用多說，使用鉤子函式需要在定義的時候實現對應的介面
export class ListPage implements OnInit {
constructor() {}
ngOnInit() {
// code here
}
}
呼叫順序
1、conwww.cppcns.comstructor
最先執行的是建構函式，在執行建構函式的時候，@Input、@ViewChild等很多變數都是不存在的，相關操作最好寫在ngOnInit裡。
2、ngOnChanges
當前元件@Input/@Output的繫結值發生變化時會觸發。
另外如果@Input是物件，只有引用發生變化的情況下才會觸發。
3、ngOnInit
在第一次 ngOnChanges 完成後呼叫，只會執行一次
4、ngDoCheck
開發者自定義變更檢測。
5、ngAfterContentInit
元件內容初始化的時候執行一次
6、ngAfterContentChecked
投射到元件的內容每次ngDoCheck呼叫後觸發。
7、ngAfterViewInit
元件及其子元件檢視初始化的時候執行一次
8、ngAfterViewChecked
元件及其子元件檢視每次ngDoCheck呼叫後觸發。
9、ngOnDestroy
在元件銷燬前呼叫。
注意
- 並不是所有的資料在constructor裡都存在，@ViewChild @ViewChildren @Input等值都還沒繫結
- 任何的變更檢測都會觸發ngDoCheck，詳見 非常消耗效能，需要小心使用
Ionic
原文件可以點上面的連結看到，挑重點說一下。
生命週期如圖，除了angular提供的生命週期，ionic添加了幾個事件：
- ionViewWillEnter 路由元件即將顯示到檢視
- ionViewDidEnter 路由元件已經顯示到檢視
在ngOnInit之後觸發ionViewWillEnter，頁面切換的過渡效果結束之後觸發ionViewDidEnter
- ionViewWillLeave 即將離開當前路由的元件 http://www.cppcns.com
- ionViewDidLeave 已經離開當前路由的元件
先呼叫ionViewWillLeave，直到成功過渡到新頁面之後（在新頁面ionViewDidEnter觸發之後），ionViewDidLeave才被呼叫。
使用ion-nav或ion-router-zwIiUFJpqoutlet的元件不應使用OnPush變化檢測策略，這樣會導致ngOnInit之類的生命週期hooks無法觸發。另外，非同步變化的資料可能不能正確渲染。
ionic是怎麼處理頁面的生命週期的
ionic使用的路由出口是<ion-router-outlet />，它拓展了angular的<router-outlet />，可以在移動裝置上有更好體驗。
從一個頁面跳轉到一個新頁面的時候，ionic會把舊頁面儲存在dom中，並且從檢視上隱藏。這樣可以保持住上一個頁面的狀態，比如滾動位置、頁面資料，這樣從新頁面返回到上一個頁面的時候，就不用重新載入一次，頁面過渡也比較平滑。
頁面只有從堆疊中退出的時候，www.cppcns.com才會真正銷燬，所以ngOnInit 和ngOnDestroy 觸發的時機和想象中可能不太一樣。
比如A是詳情頁，進入B頁面修改資料。修改完成後從B頁面返回A頁面。
如果A頁面的資料獲取方法是寫在ngOnInit裡的，那麼從B返回到A的時候，因為ngOnInit是不會觸發的，顯然不符合業務要求。
所以這個資料的獲取可以寫在ionViewWillEnter裡，這樣從B返回A的時候就可以觸發並更新
路由守衛
Ionic 3裡曾經有過ionViewCanEnter 和ionViewCanLeave兩個鉤子函式，用來判斷頁面是否可以進入/離開，一般用來限制訪問許可權 或者離開編輯頁面之前彈出二次確認提示。這兩個函式已經廢棄了，Ionic 4以後使用angular官方的路由守衛。
總結
到此這篇關於Angular和Ionic生命週期和鉤子函式的文章就介紹到這了,更多相關Angular Ionic生命週期和鉤子函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！