角度路由器 - 子路由的空数据对象答案

【问题标题】：Angular router - empty data object for child routes角度路由器 - 子路由的空数据对象
【发布时间】：2019-12-07 06:15:43
【问题描述】：

我的 Angular 路由器需要对父路由和子路由使用相同的组件，但传递数据以区分父路由和子路由。

当前问题：子路由没有从子路由注册任何数据。

定义关系的路由模块段：

{
        path: 'parent-path/:id',
        component: MyComponent,
        children: [{
          path: 'child-path'
          component: MyComponent,
          data: {MY_DATA_KEY: MY_DATA_VALUE},
        }]
},

在角度分量中：

constructor(
      //...
      private readonly activatedRoute: ActivatedRoute,
      //...
) {}

ngOnInit() {
   this.activatedRoute.data.subscribe(data => {
      console.log('data', data);  // This prints and empty object //

      /* ... do something with data */
   });
}

当前行为：

点击路线'.../parent-path/some-id'

正常的预期行为，不存在数据

点击路线'.../parent-path/some-id/child-path'

意外行为，数据仍为空

注意：我还尝试在父级添加数据，这确实在两个路由上都注册了。相对较新的角度，所以任何帮助将不胜感激。提前致谢！

【问题讨论】：

你能建立一个简单的闪电战来展示你的问题吗？这可以帮助我们更好地了解什么不适合您。谢谢。
我看到MyComponent 在路由中使用了两次，对吗？另外，您是否尝试过使用this.activatedRoute.snapshot.data？
是的，父子路由应该渲染同一个组件。我发现 activateRoute 正在返回父节点而不是子路由处的子节点

标签： angular angular-router

【解决方案1】：

angular 的路由器本质上是一个有父子节点的树结构，数据定义在树的节点上，数据对象存在于定义它们的特定节点上。所以父路由不会在它自己的“数据”中看到子路由数据，子路由也不会直接看到它的父“数据”。但是您可以根据需要从激活的路由中访问父/子路由

this.route.parent.data.subscribe(pd => console.log(pd, 'parent data'));

或

this.route.children.forEach(c => c.data.subscribe(cd => console.log(cd, 'child data'));

这是一个演示该行为的堆栈闪电战：https://stackblitz.com/edit/angular-s4mffg?file=src/app/app.module.ts

【讨论】：

最终不得不使用this.route.children...，但我仍然很难理解为什么在这种情况下 activedRoute 会返回父节点？不确定你是否有任何清楚@bryan60
注入组件的激活路由是路由树中定义路由的节点处的激活路由。所以父路由上的组件在父节点获取路由，子节点在子节点获取路由