Angular问题：返回导航后跳转组件时ngOnInit()未触发

问题背景 #

在Angular中实现了自定义路由复用策略，用于内部返回导航场景（非浏览器返回按钮）。但返回后点击当前列表项跳转到其他组件时，由于复用策略的存在，目标组件的ngOnInit()生命周期钩子无法触发，需要解决这个问题。

自定义路由复用策略代码 #

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

@Injectable({
  providedIn: 'root'
})
export class CustomRouteReuseStrategyService implements RouteReuseStrategy {
  private handlers: { [key: string]: DetachedRouteHandle } = {};
  private backNavigation: boolean = false;

  setBackNavigation(backNavigation: boolean): void {
    this.backNavigation = backNavigation;
  }

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return this.backNavigation ? false : true;
  }

  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    this.handlers[route.routeConfig.path] = handler;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.handlers[route.routeConfig.path];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

Header组件返回导航代码 #

goBack(): void {
    console.log("Go back clicked>>>");
    // 设置返回导航标记为true
    this.customRouteReuseStrategyService.setBackNavigation(true);
    // 执行返回导航
    this.navigationService.goBack();
  }

解决方案 #

方法1：重置复用标记+主动清理缓存 #

问题核心是返回后backNavigation标记未重置，且组件缓存未清理，导致后续导航仍复用旧组件。

1. 导航完成后重置标记：修改header的goBack方法，在导航结束后重置返回标记

goBack(): void {
    console.log("Go back clicked>>>");
    this.customRouteReuseStrategyService.setBackNavigation(true);
    this.navigationService.goBack().then(() => {
        // 导航完成后异步重置标记，避免影响当前导航逻辑
        setTimeout(() => {
            this.customRouteReuseStrategyService.setBackNavigation(false);
        }, 0);
    });
  }

2. 添加缓存清理方法：在自定义复用策略中新增清理指定路由缓存的方法

// 在CustomRouteReuseStrategyService中添加
clearHandler(path: string): void {
    delete this.handlers[path];
}

3. 列表项跳转时清理当前组件缓存：在列表组件的跳转方法中主动清理缓存

// 列表组件的跳转逻辑
navigateToDetail(itemId: string): void {
    // 替换为你的列表路由path
    this.customRouteReuseStrategyService.clearHandler('list');
    this.router.navigate(['/detail', itemId]);
}

方法2：优化shouldReuseRoute逻辑 #

通过判断路由参数或导航类型，决定是否复用路由，避免不必要的组件复用：

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 返回导航时复用路由
    if (this.backNavigation) {
        return future.routeConfig === curr.routeConfig;
    } else {
        // 非返回导航时，若路由参数变化则不复用
        const currParams = JSON.stringify(curr.params);
        const futureParams = JSON.stringify(future.params);
        return future.routeConfig === curr.routeConfig && currParams === futureParams;
    }
}

同样需要在导航完成后重置backNavigation标记。

方法3：路由守卫强制刷新 #

给目标组件添加路由守卫，每次进入时清理缓存，强制组件重新初始化：

1. 创建路由守卫：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { CustomRouteReuseStrategyService } from './custom-route-reuse-strategy.service';

@Injectable({ providedIn: 'root' })
export class ForceRefreshGuard implements CanActivate {
  constructor(private routeReuseStrategy: CustomRouteReuseStrategyService) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    this.routeReuseStrategy.clearHandler(route.routeConfig.path);
    return true;
  }
}

2. 在路由配置中使用守卫：

const routes: Routes = [
  {
    path: 'detail/:id',
    component: DetailComponent,
    canActivate: [ForceRefreshGuard]
  }
];

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