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

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

至于你的 parent/child 参数问题，不幸的是你会遇到一些与 v3 相同的问题，即子路由没有给父参数。它们通过一个新的可注入路由器组件 ActivatedRoute 交付，该组件仅包含给定路由的参数，而不是其父项或子项。

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

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

我猜想虽然这似乎是一种错误的做事方式并且更加困难，但它是一种强大的关注点分离，在大型项目中将使您的项目在长期内更加健壮运行.

希望对您有所帮助！

Answer 2

恢复这个因为我刚刚运行进入这个问题。您应该能够通过爬上 ActivatedRoute 树从父级获取属性。

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

Angular 2 路由：父级处理参数

Angular 2 Routing: Parent Handling Parameter

routing

parent

routeparams

angular