Angular 15.2.7自定义RouteReuseStrategy带参数路由丢失表单数据问题

你的核心问题在于带参数路由的复用Key不唯一：当前getUrl方法返回的是路由模板（如create/:email/:phnNumber），而非包含实际参数的完整路径，导致不同参数的路由实例共享同一个存储Key，无法正确匹配和复用，最终表单数据丢失。

以下是修复后的完整CustomerRouteReuseStrategy实现，以及关键修改点说明：

修复后的路由复用策略代码 #

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

export class CustomerRouteReuseStrategy implements RouteReuseStrategy {
  // 存储离开时的路由模板路径（用于匹配reuseRoutesFrom配置）
  private routeLeftFromTemplate: string | undefined;
  // 存储已分离的路由实例，Key为包含实际参数的完整URL
  private handlers: { [key: string]: DetachedRouteHandle } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    this.routeLeftFromTemplate = route.routeConfig?.path;
    return route.data['shouldReuseRoute'] || false;
  }

  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    const url = this.getUrl(route);
    console.log('[router-reuse] 存储路由实例:', url);
    if (handler) {
      this.handlers[url] = handler;
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const currentUrl = this.getUrl(route);
    // 检查当前路由是否已被存储
    const hasStoredHandler = !!this.handlers[currentUrl];
    
    if (hasStoredHandler) {
      // 验证是否从允许的路由跳转回来
      const isAllowedRoute = route.data['reuseRoutesFrom']?.includes(this.routeLeftFromTemplate);
      return isAllowedRoute || false;
    }
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    if (!route.routeConfig || route.routeConfig.loadChildren) {
      return null;
    }
    const currentUrl = this.getUrl(route);
    console.log('[router-reuse] 恢复路由实例:', currentUrl);
    return this.handlers[currentUrl] || null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    // 优先使用配置的reuse标记
    const useCustomReuse = future.routeConfig?.data?.['reuse'] || false;
    // 判断路由配置是否相同
    const sameRouteConfig = future.routeConfig === current.routeConfig;
    // 判断路由参数是否相同，避免不同参数的路由错误复用
    const sameParams = Object.keys(future.params).every(key => future.params[key] === current.params[key]);
    
    return useCustomReuse || (sameRouteConfig && sameParams);
  }

  // 生成包含实际参数的完整URL作为存储Key
  private getUrl(route: ActivatedRouteSnapshot): string {
    return route.pathFromRoot
      .map(snapshot => snapshot.url.map(segment => segment.path).join('/'))
      .filter(segment => segment.length > 0)
      .join('/');
  }
}

关键修改点说明 #

1. 唯一路由Key生成
   重写getUrl方法，生成包含实际参数的完整路径（如create/test@example.com/12345），而非路由模板。每个带不同参数的路由实例都会拥有独立的存储Key，避免覆盖或匹配错误。

2. 路由模板与实际路径分离
   将routeLeftFrom改为routeLeftFromTemplate，明确存储路由模板路径（如view/:email/:phnNumber），确保与路由配置中reuseRoutesFrom的模板列表匹配，判断逻辑更准确。

3. 增强复用判断逻辑

   • 在shouldAttach中使用完整实际URL检查存储的路由实例，确保匹配的是同一个参数的路由。
   • 在shouldReuseRoute中新增参数对比，避免不同参数的路由被错误复用（比如从create/a@a.com/111跳转到create/b@b.com/222时，不会复用之前的组件实例）。

4. 容错与调试优化

   • 添加日志输出实际存储/恢复的URL，方便调试。
   • 使用可选链处理data不存在的情况，避免报错。

测试验证 #

1. 进入create/test@example.com/12345并填写表单数据
2. 切换到view/test@example.com/12345
3. 切回create/test@example.com/12345，表单数据应保留
4. 进入create/another@example.com/67890，会创建新的组件实例，与之前的表单数据互不干扰

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