Angular 15如何判断用户离开组件路由？ngOnDestroy失效的替代方法

如果路由切换时ngOnDestroy不触发，大概率是组件被路由复用策略缓存了，或者存在生命周期钩子拼写错误（比如写成ngOnDestory）。以下是几种可靠的替代/解决方法：

1. 禁用目标路由的复用策略 #

Angular默认的RouteReuseStrategy会缓存组件以提升性能，若要强制销毁组件，可在路由配置中指定：

const routes: Routes = [
  {
    path: 'target-path',
    component: TargetComponent,
    // 强制每次路由切换都执行守卫和解析器，避免复用
    runGuardsAndResolvers: 'always',
    data: { shouldReuse: false }
  }
];

若需要全局控制，可自定义RouteReuseStrategy，在shouldReuseRoute方法中根据路由data.shouldReuse决定是否复用组件：

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

export class CustomReuseStrategy implements RouteReuseStrategy {
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 仅当路由data.shouldReuse为true时复用
    return future.routeConfig === curr.routeConfig && 
           (future.data['shouldReuse'] ?? false);
  }

  // 其他方法保持默认实现即可
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null { return null; }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
  shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
}

然后在根模块中注册该策略：

@NgModule({
  providers: [{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }]
})
export class AppModule {}

2. 使用CanDeactivate路由守卫 #

CanDeactivate守卫会在用户离开当前路由时触发，无论组件是否被复用，都能执行清理逻辑：

步骤1：定义守卫接口和实现类 #

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

// 定义组件需实现的接口
export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Promise<boolean>;
}

// 实现守卫
export class DeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    // 调用组件的canDeactivate方法，若无则允许离开
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

步骤2：组件中实现逻辑 #

import { CanComponentDeactivate } from './deactivate.guard';

export class TargetComponent implements CanComponentDeactivate {
  canDeactivate(): boolean | Promise<boolean> {
    // 执行离开时的清理操作：取消订阅、清除定时器、释放资源等
    this.cleanupResources();
    // 若需要提示用户确认离开，可返回Promise（比如弹窗确认）
    // return confirm('确定要离开吗？');
    return true;
  }

  private cleanupResources() {
    // 具体清理逻辑
  }
}

步骤3：路由配置中注册守卫 #

const routes: Routes = [
  {
    path: 'target-path',
    component: TargetComponent,
    canDeactivate: [DeactivateGuard]
  }
];

别忘了在模块的providers数组中注册DeactivateGuard。

3. 监听路由事件 #

通过订阅Router.events，监听路由导航事件，判断用户是否离开当前组件的路由：

import { Router, NavigationEnd } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

export class TargetComponent {
  private destroy$ = new Subject<void>();

  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      takeUntil(this.destroy$)
    ).subscribe((event: NavigationEnd) => {
      // 判断当前URL是否不再包含目标路由路径
      if (!event.url.includes('/target-path')) {
        this.handleLeave();
      }
    });
  }

  private handleLeave() {
    // 执行离开时的清理逻辑
  }

  // 若ngOnDestroy能触发，用于清理订阅；若不能，可结合其他方式取消订阅
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

4. 检查基础问题 #

• 确认ngOnDestroy拼写正确（注意是ngOnDestroy，不是ngOnDestory）；
• 检查组件是否通过*ngIf、<ng-template>等条件渲染方式被隐藏而非销毁；
• 确认组件是否被嵌套在其他复用容器中（比如mat-tab等），这类容器可能会缓存组件。

内容的提问来源于stack exchange，提问作者E1dar