导航到另一个页面后，离子组件不会被破坏

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

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

我正在使用：

• 角度：6.1.7
• 离子：4.1.2

Answer 1

我终于知道为什么了。

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

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

Answer 2

导航和销毁和初始化挂钩上的离子缓存页面不起作用。

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

• 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 3

如果您使用离子路由（<ion-router-outlet> 和{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }），如另一个答案中所述，页面被缓存并导航到其他页面，ngOnDestroy 不会被调用。

如果你不想这样，请使用来自 NavContrller 的navigateRoot()：

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

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

Answer 4

我正在使用 ionic 4 和 angular。对我有用的是在导航中添加 { replaceUrl: true }

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

或在模板上

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

Answer 5

replaceUrl 将defaultHref 设置为上一页以外的另一页会影响后退按钮导航

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 将数据传递到子组件，但对于基本的组件生命周期处理来说，这似乎有点过头了。