Question

我正在尝试使用rc1版本重写angular的路由器。我有一个具有子路由器的功能组，并使用非终端路由定义它，如下所示：

{ path: '/contacts/...', component: ContactsComponent}

但如果我尝试像这样导航：

<a [routerLink]="['/contacts']"></a>

它说：“无法匹配任何路线。当前段：'联系人'。可用路线：['/ dashboard'，'/ contacts /...']"

如果我试图将/ contacts / ...传递给路由器链接 - 它会突然开始工作，但在URL的末尾也会有“...”。因此，我得出的结论是，可能不再需要“......”，所以我重写了这样的路线：

{ path: '/contacts', component: ContactsComponent}

所以现在我的contacts组件被加载了，但我在ContactsComponent中定义了以下子路由：

{ path: '/group/:id', component: GroupComponent }

路由器链接：

<a [routerLink]="['./group', {id: group.id}]">{{ group.name }}</a>

哪个不适用于以下错误：

Cannot match any routes. Current segment: 'group;id=1'. Available routes: ['/', '/group/:id']

我也尝试过像“/ group”和“/ contacts / group”这样的路由器链接，它们都不起作用。

有谁知道如何使用rc1路由器进行使用非终端路径的子路由？

Answer 1

我假设你的网址是这样的：/contacts/group/5将id 5传递给contacts组件的子路由中的group组件。正确的路线是相对于内部的子组件，即组{id {5}的./group/5。

我使用方法进行操作，就像the sample中的their docs一样导航：

onSelect(crisis: Crisis) {
  // Relative link would be `./groups/${group.id}` in your case
  this.router.navigate([`./${crisis.id}`], this.currSegment);
}

但是虽然没有记录，但您可以将值作为第二个数组元素传递，而不是对象传递。点击数字导航，使用onSelect（）并点击名称使用routerLink（plnkr）

  <!-- [routerLink]="['./', group.id]"> -->
  <li *ngFor="let crisis of crises"
    <span class="badge" (click)="onSelect(crisis)">{{crisis.id}}</span> 
    <a [routerLink]="['./', crisis.id]">{{crisis.name}}</a>
  </li>

Answer 2

我认为重点在于它正在尝试

你可以试试这样的事情

<a [routerLink]="getLink()">{{ group.name }}</a>

getLink() {
  return [`group/${group.id}`]
}

我希望这会有所帮助

SubRoutes与rc1角度路由器

2 个答案: