我目前正在处理遗留代码，其中项目是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应该已经破坏了前一个页面。
我正在使用：
- Angular ：6.1.7
- 离子型：4.1.2
7条答案
按热度按时间h4cxqtbf1#
导航、销毁和初始化钩子上的离子缓存页面不起作用。
如果你需要在导航上做一些操作，你需要使用离子路由器插座挂钩。
ionViewWillEnter-当要路由到的组件即将在中设置动画时激发。ionViewDidEnter-当要路由到的组件已设置动画时激发。ionViewWillLeave-当从中布线的零部件即将设置动画时激发。ionViewDidLeave-当从中布线的元件已设置动画时激发。您不需要使用任何接口，如
OnInit或OnDestroy。你可以用钩子。范例：
7uzetpgm2#
我用的是ionic 4和angular。对我有效的方法是添加{ replaceUrl：true }到导航
或在模板上
r1wp621o3#
我终于知道为什么了。
现在每次我导航到另一个页面时都会调用ngOnDestroy，并且页面本身会从DOM中删除。
k4emjkb14#
如果您使用离子路由（
<ion-router-outlet>和{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }），如在其他答案中提到的，页面被缓存并导航到其他页面，ngOnDestroy不会被调用。如果你不想这样，可以使用NavContrller中的
navigateRoot()：this.navController.navigateRoot(['some-route']);而且用户将无法刷回上一页。
50pmv0ei5#
如果将
defaultHref设置为上一页以外的另一页，replaceUrl将影响后退按钮导航soat7uwm6#
对我来说，
ionViewWillEnter帮助了我，因为我从一个页面导航出来，而我需要改变我导航到的页面的视图。xghobddn7#
在我的例子中，我有一个
<video-player>自定义组件，当我导航到下一个页面时，它不会被销毁。假设我有一个视频播放器路由，如
/video/videoId1。此页面名为
VideoComponent，并有一个简化的模板如下：此页面的功能类似于视频播放器浏览视频播放列表。因此，
<ion-button>只是导航到播放列表中的下一个视频，本质上是导航到具有不同URL参数的相同组件，如：当向前导航发生时，前一个播放器仍然继续播放视频。这只是不断添加，所以如果我们正在查看播放列表中的第四个视频，最后三个视频仍然在后台播放。
我在
VideoPlayerComponent上试过ngOnDestroy，ionViewWillLeave和ionViewDidLeave，但没有调用。因此，我只是结束了硬编码的代码，以强制停止<ion-button>点击处理程序上的播放器。如果我把
ngOnDestroy、ionViewWillLeave或ionViewDidLeave放在父VideoComponent上，它会被正确调用，但从那里我无法访问VideoPlayerComponent组件中的方法。我可能可以使用Subject或Input将数据传递到子组件中，但对于基本的组件生命周期处理来说，这似乎有些多余。