Angular 路由数据树
Angular route data tree
我需要编写一个从 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' } }
]
}];
所以我需要一个函数返回 objects/strings 的列表,这些列表位于当前路由和每个父路由的配置数据中。
对于上面的值,当我通过路由 /people/new
将我的组件放入组件时
结果我必须有:["Parent", "Child3"]
请帮助我,强大的所有。
您可以通过注入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
变量。您可以根据自己的需要进行修改。
我需要编写一个从 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' } }
]
}];
所以我需要一个函数返回 objects/strings 的列表,这些列表位于当前路由和每个父路由的配置数据中。
对于上面的值,当我通过路由 /people/new
将我的组件放入组件时
结果我必须有:["Parent", "Child3"]
请帮助我,强大的所有。
您可以通过注入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
变量。您可以根据自己的需要进行修改。