導航到另一個頁面后，離子組件不會被銷毀

Question

我目前正在處理遺留代碼，其中項目是 Angular 6、Ionic 4 混合。 所有功能模塊都被延遲加載。

問題是，導航到另一個頁面后，我可以在導航工具的內存選項卡上看到上一頁仍然存在並且ngOnDestroy還沒有真正被觸發。

為了給你更多的細節，我的 app-routing-module 是：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';


 @NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: false, useHash: false  
 })],
  exports: [RouterModule],
 })
 export class AppRoutingModule { }  

我的路線是：

  export const routes: Routes = [
     { 
       path: '', redirectTo: '/home',
       pathMatch: 'full' 
     },
     { 
     path: 'accounts',
     loadChildren: 
    '../pages/accounts/accounts.page.module#AccountsPageModule',
      canActivate: [AuthGuardService] 
     },
     {
     path: 'administration',
     loadChildren:      
'../pages/administration/administration.page.module#AdministrationPageModule' 
     },
    { 
     path: 'bookings',
     loadChildren: 
     '../pages/bookings/bookings.page.module#BookingsPageModule',
     canActivate: [AuthGuardService],

  },

並在 app.component.html 中，連同一個ion-menu結構路由器：

 <ion-router-outlet id="content" swipeBackEnabled="false"></ion-router-outlet>

最后在每個鏈接的導航欄組件中，我使用了[routerLink]="['/something']"的[routerLink]="['/something']"指令。

導航工作正常。 問題是，經過一段時間后，該站點非常緩慢，因為即使用戶導航到另一個頁面並且 Angular 應該銷毀前一個頁面，它仍然在內存中包含所有組件、頁面和模塊。

我在用：

• 角度：6.1.7
• 離子：4.1.2

Answer 1

導航和銷毀和初始化掛鈎上的離子緩存頁面不起作用。

如果您需要對導航執行一些操作，則需要使用ionic-router-outlet hooks。

• ionViewWillEnter - 當被路由到的組件即將進入動畫時觸發。
• ionViewDidEnter - 當被路由到的組件有動畫時觸發。
• ionViewWillLeave - 當被路由的組件即將開始動畫時觸發。
• ionViewDidLeave - 當被路由的組件具有動畫時觸發。

您不需要使用任何接口，如OnInit或OnDestroy 。 只需使用鈎子。

例子：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
  ionViewDidLeave() {
    // Do actions here
  }
}

Answer 2

我正在使用 ionic 4 和 angular。 對我有用的是將 { replaceUrl: true } 添加到導航

this.router.navigate([page.url], { replaceUrl: true });

或在模板上

<a [routerLink]="page.url" replaceUrl="true">...

Answer 3

如果您使用離子路由（ <ion-router-outlet>和{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ），如另一個答案中所述，頁面被緩存並導航到其他頁面，不會調用ngOnDestroy 。

如果您不希望那樣，請使用 NavContrller 中的navigateRoot() ：

this.navController.navigateRoot(['some-route']);

並且用戶將無法返回上一頁。

Answer 4

我終於知道為什么了。

• 我從應用程序中完全刪除了 ionic 並僅使用 Angular 路由器進行導航。

現在每次我導航到另一個頁面時都會調用 ngOnDestroy 並且頁面本身從 DOM 中刪除。

Answer 5

如果將defaultHref設置為defaultHref前一頁的其他頁面，則replaceUrl會影響后退按鈕導航

Answer 6

對我來說ionViewWillEnter幫助我從頁面導航出來，而我需要更改我導航到的頁面的視圖。

Answer 7

就我而言，我有一個<video-player>自定義組件，當我導航到下一頁時它不會被破壞。

所以想象一下我有一個像/video/videoId1這樣的視頻播放器路線。

此頁面稱為VideoComponent並具有如下所示的簡化模板：

<ion-content>
   <video-player [src]="videoUrl"></video-player>
   <ion-button>Next</ion-button>
</ion-content>

此頁面的功能類似於瀏覽視頻播放列表的視頻播放器。 所以<ion-button>只是導航到播放列表中的下一個視頻，它本質上是導航到具有不同 URL 參數的相同組件，例如：

/video/videoId2
/video/videoId3

當導航發生時，前一個播放器仍然繼續播放視頻。 這只是不斷添加，所以如果我們正在查看播放列表中的第四個視頻，最后三個視頻仍在后台播放。

我已經在VideoPlayerComponent上嘗試過ngOnDestroy 、 ionViewWillLeave和ionViewDidLeave ，但沒有被調用。 所以我最終對代碼進行了硬編碼，以強制停止<ion-button>單擊處理程序上的播放器。

如果我將ngOnDestroy 、 ionViewWillLeave或ionViewDidLeave放在父VideoComponent ，它會被正確調用，但從那里我無法訪問VideoPlayerComponent組件中的方法。 我可能可以使用 Subject 或 Input 將數據傳遞到子組件中，但對於基本的組件生命周期處理來說似乎有點過分。