如何获取所有路由参数/数据 [英] How to get all route params/data

问题描述

给定路由配置

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

在 TestComponent 中，如何轻松获取所有路由参数.我想知道是否有比

In TestComponent how can I easily get all route params. I'm wondering if there is an easier way than

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

这似乎过于多余，尤其是当我正在观察可观察的路由参数而不是通过路由快照访问参数时.这种方法似乎也很脆弱，因为如果我移动了任何路由/参数，它就会中断.我习惯于使用 angular ui-router，其中为单个对象 $stateParams 提供了所有易于访问的参数数据.我对从路由树中的单个节点访问的路由解析数据也有同样的担忧.任何帮助将非常感激.提前致谢

This seems overly redundant especially if I'm watching the route params observable instead of access the param through the route snapshot. This method also seems fragile since it would break If I moved any any of the routes/params around. Im used to angular ui-router where a single object $stateParams was supplied with all param data easily accessible. I have these same concerns with route resolved data along being accessed from a single node in the route tree. Any help would be much appreciated. Thanks in advance

推荐答案

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

As of Angular 5.2, you can do Router configuration to inherit all params to child states. See this commit if interested in the gory details, but here's how it's working for me:

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

Wherever you have your call to RouterModule.forRoot(), include a configuration object with the inheritance strategy set to always (default is emptyOnly):

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

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

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

现在，当您在子组件中查看 ActivatedRoute 时，祖先的参数会出现在那里(例如 activatedRoute.params)，而不是像 这样混乱的东西activateRoute.parent.parent.parent.params.您可以直接访问该值(例如 activatedRoute.params.value.userId)或通过 activatedRoute.params.subscribe(...) 订阅.

Now when you're in a child component looking at a ActivatedRoute, ancestors' params appear there (e.g. activatedRoute.params) rather than something messy like activatedRoute.parent.parent.parent.params. You could access the value directly (e.g. activatedRoute.params.value.userId) or subscribe via activatedRoute.params.subscribe(...).

这篇关于如何获取所有路由参数/数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！