Angular 路由器 - 子路由的空数据对象

Question

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

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

定义关系的路由模块段：

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

在angular组件中：

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'

意外行为，数据仍然为空

注意：我还尝试在父级别添加数据，这确实在两条路线上都注册了。 Angluar 相对较新，因此我们将不胜感激。提前致谢！

Answer 1

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

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'));

这里是一个演示行为的 stackblitz：https://stackblitz.com/edit/angular-s4mffg?file=src/app/app.module.ts

Angular 路由器 - 子路由的空数据对象

Angular router - empty data object for child routes

angular

angular-router