Angular 2 路由：父处理参数

Question

我的 Angular 2 路由出现错误。 （使用angular/router2.0.0-rc1）

路线如下：

tabs/editItem (For creating a new item)
tabs/id/editItem (For editing an item)
tabs/id/itemStuff
tabs/id/differentStuff

在我的标签组件上，我需要在没有给出 ID 时禁用 itemStuff 和 differentStuff 选项，但在有 ID 时启用。

我在模板中的 ID 上使用了 NgIf，并且：

  routerOnActivate(curr: RouteSegment) {
    if(curr.getParam('pId') == null)
      return;

    this.pId = +curr.getParam('pId');
  }

问题是我无法从我的选项卡页面访问路由参数，因为“routerOnActivate”仅在路由端点调用。似乎一个选项是让子元素为我进行检查，然后发回一个事件以供 Tabs 组件更新，但这看起来很难看，而且不是正确的方法。

感谢任何帮助！

TLDR：父组件如何访问和处理参数

Answer 1

因为我刚刚遇到这个问题，所以恢复了这个。您应该能够通过爬上 ActivatedRoute 树从父级获取属性。

  getId(route: ActivatedRouteSnapshot){
      let id = route.params["id"];
      if(id)
      {
        return id;
      }
      if(route.parent)
      {
        return this.getId(route.parent)
      }
      return undefined;
  }

Answer 2

首先，最好升级项目以便使用路由器的 v3。 v2 路由器已不再开发，v3 路由器的工作方式与 v2 路由器完全不同。

至于您的父/子参数问题，不幸的是，您将遇到与 v3 相同的问题，即子路由没有给出父参数。它们是通过一个新的可注入路由组件ActivatedRoute 传递的，该组件仅保存给定路由的参数，而不是其父级或子级。

这种行为似乎是设计使然，这意味着您需要处理“拥有”该参数的组件中的参数，然后通过单独的服务将这些参数提供给您的其他父/子路由。

至于解决方法，我还没有看到任何直接通过路由器组件执行此操作的方法，但我想说的是，随着路由器 API 的不断变化，解决方法可能无论如何都不是一个稳定的选择。

我猜想虽然这种行为看起来可能是错误的做事方式并且更加困难，但从长远来看，它对大型项目的关注点的强大分离将使您的项目更加健壮。

希望这会有所帮助！