Angular如何将父组件获取的activated route参数传递给子路由组件

原因说明 #

Angular路由默认采用emptyOnly的参数继承策略，仅当子路由为空路径时才会继承父路由参数，其他场景下路由参数仅对当前路由段可见。你在父组件MediaComponent中通过this.activatedRoute.parent.snapshot.params.memberId获取的是media路由上层路径的参数，子路由组件的activatedRoute对应子路径本身，它的parent指向media路由段，和父组件的activatedRoute平级，因此复用相同写法自然拿不到上层的memberId参数。

解决方案 #

如果项目没有特殊的路由参数隔离需求，优先选择方案2，改造成本最低。

方案1：调整子组件参数获取逻辑（无需修改路由配置） #

直接遍历全路由段的参数合并取值，无需关心参数所在的层级：

// 子组件中取值
const allParams = this.activatedRoute.snapshot.pathFromRoot
  .reduce((params, route) => Object.assign(params, route.params), {});
const memberId = allParams.memberId;

如果确定参数层级，也可以直接匹配层级取值，你当前场景下参数在media路由的上层，子组件可以这么写：

const memberId = this.activatedRoute.parent.parent.snapshot.params.memberId;

方案2：全局开启路由参数继承（最简便） #

在根路由配置RouterModule.forRoot中添加paramsInheritanceStrategy配置，全局开启全层级参数继承：

// app-routing.module.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always' // 开启所有子路由继承父级参数
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

配置后在任意子组件可以直接从当前activatedRoute中拿到所有父层级的参数：

const memberId = this.activatedRoute.snapshot.params.memberId;

方案3：通过共享服务传值（适合有额外参数处理逻辑的场景） #

1. 先创建一个共享服务：

// media-share.service.ts
@Injectable({ providedIn: 'root' })
export class MediaShareService {
  memberId: string | number;
}

2. 父组件MediaComponent拿到参数后存入服务：

constructor(
  private activatedRoute: ActivatedRoute,
  private mediaShareService: MediaShareService
) {
  this.mediaShareService.memberId = this.activatedRoute.parent.snapshot.params.memberId;
}

3. 子组件直接注入服务取值即可：

constructor(private mediaShareService: MediaShareService) {
  const memberId = this.mediaShareService.memberId;
}

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