Ionic 4 Angular应用跳转时如何销毁组件？Tab切换子组件未销毁问题

问题根因 #

Ionic 4 默认启用了内置的路由复用策略，会缓存所有Tab对应的路由栈状态，切换Tab时不会销毁当前Tab下已加载的子路由组件，因此你切回Tab1时会保留之前打开的InvitesComponent状态，也不会触发组件的destroy钩子。

可行解决方案 #

方案1：自定义路由复用策略，禁用Tab路由缓存

这是最彻底的方案，直接替换Ionic默认的路由复用策略，让切换Tab时自动销毁旧路由的所有组件：

1. 新建自定义路由复用策略类

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

export class NoTabCacheReuseStrategy implements RouteReuseStrategy {
  // 不复用任何路由
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 只有路由完全相同时才复用，切换Tab时不会复用旧路由
    return future.routeConfig === curr.routeConfig;
  }
}

2. 在AppModule的providers中替换默认策略

import { RouteReuseStrategy } from '@angular/router';
import { NoTabCacheReuseStrategy } from './no-tab-cache.reuse-strategy';

@NgModule({
  // ...其他配置
  providers: [
    { provide: RouteReuseStrategy, useClass: NoTabCacheReuseStrategy }
  ]
})
export class AppModule {}

方案2：监听Tab切换事件，手动重置Tab的根路由

如果只想处理Tab1的场景，不需要全局禁用缓存，可以监听Tab切换事件，切回Tab1时自动重定向到Tab1的根路径，Angular会自动销毁之前的InvitesComponent：

1. 在tabs.page.html中绑定Tab切换事件

<ion-tabs (ionTabsDidChange)="onTabChange($event)">
  <!-- 你的原有Tab配置 -->
</ion-tabs>

2. 在tabs.page.ts中添加切换逻辑

import { Router } from '@angular/router';

export class TabsPage {
  constructor(private router: Router) {}

  onTabChange(event: {tab: string}) {
    if (event.tab === 'tab1') {
      // 重定向到Tab1根路径，自动销毁子路由组件
      this.router.navigate(['/tabs/tab1'], { replaceUrl: true });
    }
  }
}

方案3：在Tab1页面的生命周期中重置路由

也可以直接在Tab1页面的Ionic生命周期钩子中处理，每次进入Tab1时重置子路由：

import { IonViewWillEnter } from '@ionic/angular';
import { Router } from '@angular/router';

export class Tab1Page implements IonViewWillEnter {
  constructor(private router: Router) {}

  ionViewWillEnter() {
    // 检查当前路由是否是Tab1的子路由，如果是就重置到根路径
    if (this.router.url.includes('/tab1/invites')) {
      this.router.navigate(['/tabs/tab1'], { replaceUrl: true });
    }
  }
}

以上三种方案都能实现需求：切换Tab后回到Tab1显示默认页面，同时触发InvitesComponent的ngOnDestroy钩子。

内容的提问来源于stack exchange，提问作者Влад Бабаев