Angular自定义路由复用策略：已存储组件仍触发ngOnDestroy？

你的核心问题出在路由复用的判断逻辑和存储实例的Key设计上，以下是具体的修复步骤和原因：

1. 替换组件名为唯一路由标识作为存储Key #

你当前用route.routeConfig.component?.name作为存储Key，存在两个致命问题：

• 多个路由复用同一组件时，会覆盖之前存储的实例
• 无法区分同一组件在不同路由下的实例

修改为结合路由Path和组件名的唯一Key：

private getRouteKey(route: ActivatedRouteSnapshot): string {
  return `${route.routeConfig?.path || ''}-${route.routeConfig?.component?.name || ''}`;
}

store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
  const key = this.getRouteKey(route);
  this._storedRoutes[key] = handle;
  console.log("STORED ROUTES", this._storedRoutes);
}

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
  if (!route.routeConfig) {
    return null;
  }
  const key = this.getRouteKey(route);
  return this._storedRoutes[key] || null;
}

shouldAttach(route: ActivatedRouteSnapshot): boolean {
  if (!route.data?.reuseRoute) return false;
  const key = this.getRouteKey(route);
  return !!this._storedRoutes[key];
}

2. 修复shouldReuseRoute的判断逻辑 #

你原有的逻辑仅判断routeConfig是否相等，当从子路由返回父路由时，future（父路由）和curr（子路由）的routeConfig必然不同，会返回false，导致Angular错误地认为需要销毁并重建父路由组件，即使你已经存储了它。

修改后的逻辑会优先判断是否为同一路由，再判断目标路由是否有可复用的存储实例：

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  // 同一路由直接复用
  if (future.routeConfig === curr.routeConfig) {
    return true;
  }

  // 目标路由已存储实例，允许复用（处理从子路由返回父路由的场景）
  const futureKey = this.getRouteKey(future);
  return future.data?.reuseRoute && !!this._storedRoutes[futureKey];
}

3. 验证路由配置的正确性 #

确保你要复用的父路由在配置中明确设置了reuseRoute标记：

const routes: Routes = [
  {
    path: 'component-a',
    component: ComponentA,
    data: { reuseRoute: true },
    children: [
      // 子路由配置
      { path: 'child', component: ChildComponent }
    ]
  }
];

问题根源总结 #

• 存储Key不唯一导致实例匹配错误
• shouldReuseRoute逻辑未处理跨层级路由切换的场景，Angular无法识别需要复用已存储的父组件，进而触发销毁重建流程

修改后，当你从子路由返回父路由时，Angular会正确读取存储的组件实例，不会触发ngOnDestroy和ngOnInit，构造函数也不会重复执行。

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