angular - 导航到另一个页面后， ionic 组件不会被销毁

Question

我目前正在处理遗留代码，其中项目是 Angular 6、Ionic 4 的混合体。所有功能模块都被延迟加载。

问题是，在导航到另一个页面后，我可以在导航工具的内存选项卡上看到上一个页面仍然存在，并且 ngOnDestroy 还没有真正被触发。

为了给你更多的细节，我的应用程序路由模块是:

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']" 指令。

导航正常。问题是一段时间后网站速度非常慢，因为它仍然在内存中包含每个组件、页面和模块，即使用户导航到另一个页面并且 Angular 应该已经销毁了前一个页面。

我正在使用:

• Angular :6.1.7
• ionic :4.1.2

Answer 1

Ionic 缓存页面的导航和销毁以及初始化 Hook 不起作用。

如果您需要对导航执行一些操作，您需要使用 ionic-router-outlet钩子(Hook)。

• ionViewWillEnter - 当被路由到的组件即将执行时触发 动画。
• ionViewDidEnter - 当组件被路由到时触发 有动画。
• ionViewWillLeave - 当被路由的组件是 即将制作动画。
• ionViewDidLeave - 当被路由的组件有 动画。

您不需要使用任何接口(interface)，例如 OnInit 或 OnDestroy。只需使用钩子(Hook)即可。

例子:

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