Angular新增独立组件调用activatedRoute返回空对象如何解决？

你配置的resolve挂载在层级更高的父路由（path: 'path'节点）上，而ActivatedRoute.data默认仅返回当前组件所属路由节点的数据源，StoriesComponent对应的path: 'stories'路由节点本身没有配置resolve或静态data，因此直接订阅拿到的是空对象。

原有懒加载模块内的组件可以正常拿到数据，通常是两种情况：

• 你在原有组件中实际是通过父路由节点拿取数据，只是之前没注意到层级差异
• 原有组件的路由层级更深，你之前可能已经做过路由data的遍历处理

方案1：直接取父路由的data（推荐，无需修改全局配置） #

如果确认resolve在当前路由的直接父层，直接修改订阅源为父路由即可：

ngOnInit() {
  this.activatedRoute.parent.data.subscribe(data => {
    this.routeData = data;
  });
}

如果不确定路由层级，可以遍历路由链直到找到目标字段，适配后续路由调整：

ngOnInit() {
  let targetRoute = this.activatedRoute;
  while (targetRoute) {
    const data = targetRoute.snapshot.data;
    if (data?.resolver) {
      this.routeData = data;
      // 要持续订阅的话可以换成 targetRoute.data.subscribe(...)
      break;
    }
    targetRoute = targetRoute.parent;
  }
}

方案2：开启全局路由参数继承 #

如果需要所有子路由都能自动拿到父层的data、params等参数，可以在根路由模块配置paramsInheritanceStrategy：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      paramsInheritanceStrategy: 'always' // 开启父层参数自动继承到子路由
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

开启后原有组件的代码不需要做任何修改，直接订阅activatedRoute.data就能拿到父层的resolve数据。

方案3：路由节点重复配置resolve（不推荐） #

如果仅需要StoriesComponent单独使用该resolve，也可以直接在对应路由节点补充配置，但会导致resolver重复执行，如果resolver包含接口请求会产生冗余调用：

{ path: 'stories', component: StoriesComponent, resolve: { resolver: myCustomResolver } }

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