角度路线数据树

Question

我需要编写一个从 routeConfigs 获取对象的组件。像这样：

route.routeConfig.data['info']

哪里路由：ActivatedRoute 和这样配置的路由：

const routes: Routes =
  [{
    path: 'people', data: { info: 'Parent' },
    children: [
      { path: '', component: Component1, data: { info: 'Child1' } },
      { path: ':id', component: Component1, data: { info: 'Child2' } },
      { path: 'new', component: Component1, data: { info: 'Child3' } }
    ]
  }];

所以我需要一个函数返回一个对象/字符串列表，这些对象/字符串位于当前路由和每个父路由的配置数据中。 对于上述值，当我通过路由 /people/new 将组件放入组件时 结果我必须有：["Parent", "Child3"]

请帮助我，强大的所有人。

Answer 1

您可以通过注入ActivatedRoute然后使用this.activatedRoute.snapshot.data来访问当前激活的Route的数据。但是要访问父级，您需要使用this.activatedRoute.parent.snapshot.data 获取当前路由的父级。由于可能有任意数量的父母，您可以递归地遍历树并获取数据。

为您创建示例stackblitz。在下面添加了必要的代码：

let activatedRoute = this.activatedRoute;
this.data = [];
while (activatedRoute) {
  console.log(activatedRoute.snapshot.data);
  this.data.push(activatedRoute.snapshot.data);
  activatedRoute = activatedRoute.parent;
}

这将使用路由配置数据中的所有值更新this.data 变量。您可以根据自己的需要进行修改。