Ionic4 頁面生命周期

Ionic4 頁面生命周期

本文主要介紹使用Ionic和Angular構(gòu)造應(yīng)用的頁面的生命周期。

Angular生命周期

Ionic支持Angular的生命周期。Angular的下面兩種生命周期使用最多。

Ionic頁面生命周期

除了Angular生命周期，Ionic Angular提供了以下的生命周期事件。

ionViewWillEnter和ionViewDidEnter的區(qū)別主要在于觸發(fā)的時(shí)機(jī)，前者在ngOnInit之后頁面動(dòng)畫之前觸發(fā)，后者在頁面動(dòng)畫之后觸發(fā)。

對(duì)于ionViewWillLeave和ionViewDidLeave而言，ionViewWillLeave在離開頁面的動(dòng)畫開始時(shí)觸發(fā)，而ionViewDidLeave在新頁面ionViewDidEnter事件觸發(fā)之后執(zhí)行。

Ionic如何處理頁面的生命

Ionic有自己的路由器出口，即<ion-router-outlet />，這個(gè)路由出口繼承了Angular的<router-outlet />并具有一些附加功能，可為移動(dòng)設(shè)備提供更好的體驗(yàn)。

當(dāng)一個(gè)應(yīng)用包在<ion-router-outlet />中時(shí)，Ionic的路由與Angular有點(diǎn)差別。當(dāng)您導(dǎo)航到一個(gè)新頁面時(shí)，Ionic會(huì)將舊頁面保留在現(xiàn)有的DOM中，將該視圖隱藏并轉(zhuǎn)換新頁面。我們這樣做的原因有兩個(gè)方面：

1) 我們可以維護(hù)舊頁面的狀態(tài)（屏幕上的數(shù)據(jù)、滾動(dòng)位置等）。
2) 我們可以提供更平滑的頁面轉(zhuǎn)換，因?yàn)樗呀?jīng)存在，不需要重新創(chuàng)建。

頁面只有在出棧時(shí)，才會(huì)從dom中刪除，例如點(diǎn)擊UI中的返回按鈕或?yàn)g覽器返回按鈕。

由于這種特殊的處理方式，ngOnInit和ngOnDestroy在某些頁面切換時(shí)可能并不會(huì)執(zhí)行。

ngOnInit僅在頁面新創(chuàng)建時(shí)執(zhí)行，而從其它頁面返回到該頁面時(shí)則不執(zhí)行。例如，在選項(xiàng)卡界面中的每個(gè)頁面之間導(dǎo)航只會(huì)調(diào)用每個(gè)頁面的ngOnInit方法一次，但在隨后的訪問中不會(huì)調(diào)用該方法。只有當(dāng)頁面出棧時(shí)，ngOnDestroy才會(huì)啟動(dòng)。

路由守衛(wèi)

在Ionic3中，有兩種附加的生命周期事件可用于控制何時(shí)可以進(jìn)入頁面ionViewCanEnter和離開頁面ionViewCanLeave。這些可以用來保護(hù)頁面不被未經(jīng)授權(quán)的用戶使用，并在您不希望用戶離開時(shí)（如在填寫表單時(shí)）將其保留在頁面上。

這些方法在Ionic4中被移除了，這部分功能可以通過Angular的路由守衛(wèi)來實(shí)現(xiàn)。

路由守衛(wèi)可以實(shí)現(xiàn)對(duì)某個(gè)路由采取特定的操作。通過實(shí)現(xiàn)特定接口的類，CanActivate和CanDeactivate可以實(shí)現(xiàn)與刪除事件ionViewCanEnter和ionViewCanLeave相同的功能。

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authService.isAuthenticated();
  }
}

使用該守衛(wèi)時(shí)，需要將其添加到路由配置中。

{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...',  }

更多路由守衛(wèi)相關(guān)的內(nèi)容，請(qǐng)查看Angular的路由守衛(wèi)文檔。

各生命周期使用指南

以下是關(guān)于每個(gè)生命周期事件的用例的一些提示。

• ngOnInit:初始化組件并從服務(wù)中加載數(shù)據(jù)，這些數(shù)據(jù)在以后每次訪問時(shí)都不需要刷新。
• ionViewWillEnter:由于ionViewWillEnter在每次導(dǎo)航到該頁面時(shí)都會(huì)調(diào)用(不管是否初始化)，如果你需要每次進(jìn)入頁面都刷新，這是一個(gè)好的時(shí)機(jī)。然而，如果你的數(shù)據(jù)在動(dòng)畫加載過程中返回，會(huì)啟動(dòng)大量的DOM操作，這可能會(huì)導(dǎo)致一些不穩(wěn)定的動(dòng)畫。
• ionViewDidEnter:如果在ionViewWillEnter中加載數(shù)據(jù)產(chǎn)生了性能問題，可以改為在ionViewDidEnter中執(zhí)行數(shù)據(jù)調(diào)用。但是，在用戶看到頁面之前，此事件不會(huì)觸發(fā)，因此可能需要使用加載指示器或者骨架屏幕，來避免數(shù)據(jù)加載完成后內(nèi)容不自然的閃爍。
• ionViewWillLeave:可用于取消對(duì)observables的訂閱等代碼的清理。當(dāng)從當(dāng)前頁面導(dǎo)航到其它頁面時(shí)ngOnDestroy可能不會(huì)觸發(fā)，因此，可以將清理相關(guān)的代碼放置于此。
• ionViewDidLeave: 當(dāng)這個(gè)事件觸發(fā)時(shí)，新頁面已完全加載完成。因此，需要在頁面隱藏時(shí)執(zhí)行的邏輯都可以放到這里。
• ngOnDestroy - 清除你不想在ionViewWillLeave中清除的頁面邏輯。

原文鏈接https://ionicframework.com/docs/angular/lifecycle