导航到另一个页面后，离子组件未损坏

Question

我目前正在研究项目为Angular 6，Ionic 4 Hybrid的旧代码。所有功能模块正在延迟加载。

问题是，导航到另一页后，我可以在nav工具的“内存”选项卡上看到上一页仍然存在，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>

最后，在每个链接的navbar组件中，我使用[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不会被调用。

如果你不想要，navigateRoot()从 NavContrller使用：

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

并且用户将无法返回上一页。

Answer 4

我终于知道为什么了。

• 我从应用程序中完全删除了 ionic 并仅使用 Angular 路由器进行导航。

现在每次我导航到另一个页面时都会调用 ngOnDestroy 并且页面本身从 DOM 中删除。