Angular 2新(RC1)路由器。嵌套路线

时间:2016-05-13 00:01:07

标签: angular angular2-routing

在子组件的beta版本中(假设为'child1'),您可以告诉您的父级加载(导航到)不同的子组件而不是当前的类型:

 _router.parent.navigate(['child2']);

('_router' is injected in constructor)

在RC1中,不再有“父”属性,因此您似乎必须使用_router.navigate()并从应用程序根目录提供完整的URL。像

这样的东西
/root/grandparent/parent/child2

现在,问题是子组件是否只知道父母的路线而不是祖父母 - 你是怎么做到的? 很高兴使用_router.navigate(['../child2'])但这会给我一些奇怪的错误,例如"invalid number of '../'.

到目前为止,找到父母网址的唯一方法是:

_router.routeTree._root.children[0].value.stringifiedUrlSegments

(您也可以从OnActivate活动到达那里)

但这对我来说是错误的。它也可能因父母/祖父母的数量而有所不同 - 我还没有尝试过。

那么,是否有更好的方法可以做到这一点,或者相对路径应该有效并且我做错了什么?

谢谢。

1 个答案:

答案 0 :(得分:4)

我遇到了同样的问题。就在今天,我找到了解决方案(它位于router.ts文件here行:89)

/**
   * Navigate based on the provided array of commands and a starting point.
   * If no segment is provided, the navigation is absolute.
   *
   * ### Usage
   *
   * ```
   * router.navigate(['team', 33, 'team', '11], segment);
   * ```
   */
  navigate(commands: any[], segment?: RouteSegment): Promise<void> {
    return this._navigate(this.createUrlTree(commands, segment));
  }

您需要导入RouteSegment并将其添加到构造函数

import { Router, RouteSegment } from '@angular/router';
...
contructor(private $_router:Router, private $_segment:RouteSegment){}
...

//If you are in for example child1 and child 1 is sibling of child2
this.$_router.navigate(['../child2'],this.$_segment);