从 Angular 中的另一个组件获取路由器参数答案

【问题标题】：Get router params from another component in Angular从 Angular 中的另一个组件获取路由器参数
【发布时间】：2017-08-24 09:20:03
【问题描述】：

我正在使用 Angular4。我有一些 BarComponent 显示在 app.component 模板中（对于几乎所有页面，它就像菜单栏）。我想获取“属于”另一个组件的路由器参数，而不是 BarComponent 的子项/子项。
例如，我有路线：

/some-section-name/:id{here may be sub-routes}

我可以使用 BarComponent 中的 Angular 方法获取这个 :id 参数吗？
结构如下：

|- app.component
   |- bar.component
   |- (lazy load) some section
       |- here is the component that has this :id param

【问题讨论】：

标签： angular angular4-router

【解决方案1】：

我不得不多次面对这个问题，没有找到 angular 已经提供的任何东西来解决它。

所以我做了一个特殊的服务 routeReader 接收任何 Router 或 ActivatedRoute，然后在探索整个之前取它的.root.snapshot children 树。

也许对你有帮助。

这是只读取主分支的方法之一，递归读取整个树并没有太多改变。

getParamsFromTop(route: ActivatedRouteSnapshot) {
    let paramsMap = {};
    let routeCursor = route;
    while (routeCursor) {
      paramsMap = {...paramsMap, ...routeCursor.params};
      routeCursor = routeCursor.children[0];
    }
    return paramsMap;
  }

编辑 1：如果您放置根路由快照，这样的东西应该可以工作。

getParamsRecurse(route: ActivatedRouteSnapshot) {
    let paramsMap = {...route.params};
    for (let i = 0; i < route.children.length; i++) {
      paramsMap = {...paramsMap, ...this.getParamsRecurse(route.children[i])};
    }
    return paramsMap;
  }

【讨论】：

有趣的选项，很好，它不关心嵌套级别。糟糕的时刻 - 递归，如果应用程序有很多孩子。不过还是谢谢了，很有帮助。