Angular子路由组件如何获取父级路由的所有路径参数？

AppLessonComponent 中可以正常获取路径中的:categoryId和:chapterId参数。默认情况下activatedRoute.snapshot.params仅返回当前路由段的:lessonsId，是Angular路由的默认参数隔离逻辑，可通过以下三种方式实现跨层级参数获取：

方法1：全局配置参数继承（最简便） #

Angular路由支持全局配置参数继承策略，只需要在根模块导入RouterModule.forRoot()时添加paramsInheritanceStrategy配置项，配置后所有子路由会自动继承所有祖先路由的参数、查询参数等数据，无需额外遍历：

// app-routing.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      paramsInheritanceStrategy: 'always' // 添加该配置即可
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

配置完成后，原有写法即可直接拿到所有层级参数：

// AppLessonComponent 中
ngOnInit() {
  // params中会同时包含categoryId、chapterId、lessonsId三个参数
  const { categoryId, chapterId, lessonsId } = this.activatedRoute.snapshot.params;
}

注意：该配置为全局生效，会作用于项目内所有路由，适合需要频繁获取父级路由参数的项目。

方法2：遍历路由路径节点获取（无全局侵入） #

如果不想修改全局路由配置，可以通过Angular提供的pathFromRoot属性，拿到从根路由到当前路由的所有节点集合，遍历合并所有节点的参数即可：

// AppLessonComponent 中
import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  // 快照方式：适合路由参数不会在组件存活时变化的场景
  let allParams = {};
  this.activatedRoute.pathFromRoot.forEach(route => {
    allParams = { ...allParams, ...route.snapshot.params };
  });
  // allParams 包含所有层级的路由参数
  const { categoryId, chapterId, lessonsId } = allParams;

  // 响应式方式：适合参数可能动态变化、需要实时监听的场景
  this.activatedRoute.pathFromRoot.forEach(route => {
    route.params.subscribe(params => {
      // 按需处理对应层级的参数变化即可
    })
  })
}

该方法不需要修改全局配置，仅在需要的组件内单独实现，灵活度更高。

方法3：逐层查找父路由节点 #

本质和方法2逻辑一致，只是手动沿parent属性向上遍历父路由节点直到根节点，适合只需要拿某一级特定父路由参数的场景：

// 获取上一级父路由（chapters对应路由）的参数
const chapterParams = this.activatedRoute.parent?.snapshot.params;
// 获取上上级父路由（cours对应路由）的参数
const categoryParams = this.activatedRoute.parent?.parent?.snapshot.params;

注意：这种写法强依赖路由嵌套层级，如果后续路由结构调整，很容易出现拿不到参数的问题，非特殊场景不优先使用。

补充说明：如果路由是惰性加载的模块，上述方法依然生效，pathFromRoot会完整包含所有路由层级的节点，不会因为模块懒加载截断路由树。

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