如何获得所有路线参数/数据

Question

给定路由配置

{
   path: '/root/:rootId',
   children: [{
       path: '/child1/:child1Id',
       children: [{
           path: '/child2/:child2Id
           component: TestComponent
       }]
   }]
}

在TestComponent中,我如何轻松获得所有路径参数.我想知道是否有比这更简单的方法

let rootId = route.parent.parent.snapshot.params;
let child1Id = route.parent.snapshot.params;
let child2Id = route.snapshot.params;

这似乎过于多余,特别是如果我正在观察路线参数可观察而不是通过路线快照访问参数.这个方法看起来也很脆弱,因为它会破坏如果我移动任何路线/参数周围.我习惯于角度ui-router,其中提供了单个对象$ stateParams,所有param数据都可以轻松访问.我从路由树中的单个节点访问路由解析数据时也遇到了这些问题.任何帮助将非常感激.提前致谢

Answer 1

从Angular 5.2开始,您可以执行路由器配置以将所有参数继承到子状态.如果对血腥细节感兴趣,请参阅此提交,但这是它如何为我工作:

无论您何时进行调用RouterModule.forRoot(),都包含一个配置对象,其继承策略设置为always(默认为emptyOnly):

import {RouterModule, ExtraOptions} from "@angular/router";

export const routingConfiguration: ExtraOptions = {
  paramsInheritanceStrategy: 'always'
};

export const Routing = RouterModule.forRoot(routes, routingConfiguration);

现在,当你在一个儿童组件中查看a时ActivatedRoute,祖先的参数出现在那里(例如activatedRoute.params)而不是像凌乱的东西activatedRoute.parent.parent.parent.params.您可以直接访问该值(例如activatedRoute.params.value.userId)或通过订阅activatedRoute.params.subscribe(...).

Answer 2

您需要迭代路由段。

就像是

var params = [];
var route = router.routerState.snapshot.root;
do {
 params.push(route.params); 
 route = route.firstChild;
} while(route);

这为您提供params了每个路线段的列表，然后您可以从中读取所需的参数值。

Object.keys(params)可能会从param实例中获取所有可用的参数名称。