Angular中如何从子路由向父路由Resolver传递静态data

Angular 路由的解析流程是从根层级向子层级依次执行，父路由上挂载的 Resolver 触发时，传入的 ActivatedRouteSnapshot 仅包含当前父路由自身配置的 data 字段，子路由定义的 data 不会自动合并到父级快照对象中，因此直接读取快照的 data 属性拿不到子路由配置的 contentId。

不需要在每个子路由重复配置 Resolver，也不需要额外维护 URL 与 PageId 的映射关系，直接在父路由的 Resolver 中遍历已构建完成的路由快照树，就能拿到目标子路由上配置的 data 字段，完全兼容你现有的路由配置结构。

具体实现代码 #

首先修改 ContentResolver 的逻辑，增加一个简单的路由查找方法，从当前父路由快照出发，向下找到配置了 contentId 的目标子路由：

@Injectable({ providedIn: 'root' })
export class ContentResolver implements Resolve<unknown> {
  constructor(private contentService: ContentService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<unknown> {
    // 递归查找配置了contentId的目标路由
    const targetRoute = this.getTargetRoute(route);
    const pageId = targetRoute?.data?.['contentId'];

    // 替换为你自己的解析逻辑即可
    return this.contentService.fetchPageContent(pageId);
  }

  private getTargetRoute(route: ActivatedRouteSnapshot): ActivatedRouteSnapshot | null {
    // 当前路由存在contentId配置就直接返回
    if (route.data['contentId']) {
      return route;
    }
    // 遍历所有子路由递归查找
    for (const childRoute of route.children) {
      const matched = this.getTargetRoute(childRoute);
      if (matched) return matched;
    }
    return null;
  }
}

方案说明 #

• 你现有的路由配置不需要做任何修改，runGuardsAndResolvers: 'always' 的配置依然生效，每次子路由切换都会重新触发父路由 Resolver 执行
• 递归查找的写法兼容任意层级的路由嵌套，后续如果在子路由下再加新的嵌套层级，只要对应路由配置了 contentId 就能被正确识别，不需要修改 Resolver 逻辑
• 所有页面和 PageId 的映射关系依然维护在路由的 data 配置中，是单一数据源，不需要额外在 Resolver 里写硬编码的 URL 映射规则，新增页面只需要加对应的子路由配置即可

注意：不要直接用 route.firstChild 获取子路由，当存在多层路由嵌套、或者有重定向、空路径子路由时，firstChild 可能指向没有配置 contentId 的中间层级路由，导致取值失败，递归查找的方式稳定性更高。

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