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应该已经破坏了前一个页面，该站点中的每个组件，页面和模块仍在内存中。

我正在使用：

角度：6.1.7
离子：4.1.2

Answer 1

我正在使用离子4和角钢。对我有用的是在导航中添加{replaceUrl：true}

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

或在模板上

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

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，仅将Angular路由器用于导航。

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

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

发生向前导航时，前一个播放器仍继续播放视频。这只是不断添加，因此，如果我们正在观看播放列表中的第四个视频，则最后三个视频仍在后台播放。

我在ngOnDestroy上尝试过ionViewWillLeave，ionViewDidLeave和VideoPlayerComponent，但没有得到调用。因此，我最终对代码进行了硬编码，以强制播放器停止在<ion-button>点击处理程序上。

如果我将ngOnDestroy，ionViewWillLeave或ionViewDidLeave放在父VideoComponent上，它将被正确调用，但是从那里我无法访问其中的方法VideoPlayerComponent组件。我可能可以使用“主题”或“输入”将数据传递到子组件中，但是对于基本组件生命周期处理来说似乎有些过分。

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

7 个答案: