带有 rc1 angular 路由器的子路由

Question

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

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

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

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

上面写着："Cannot match any routes. Current segment: 'contacts'. Available routes: ['/dashboard', '/contacts/...']"

如果我尝试将 /contacts/... 传递给路由器 link - 它会突然开始工作，但 url 末尾会有“...”出色地。所以这让我得出结论，也许不再需要“...”，所以我重写了这样的路线：

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

现在我的联系人组件已加载，但我在 ContactsComponent 中定义了以下子路径：

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

还有一个路由器link:

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

以下错误不起作用：

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

我也尝试过路由器 link，例如“/group”和“/contacts/group”，其中 none 有效。

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

Answer 1

我认为关键在于它正在尝试

你可以试试这样的

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

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

希望对您有所帮助

Answer 2

我假设您的 url 是这样的：/contacts/group/5 将 id 5 传递给联系人组件的子路由中的组组件。正确的路线是相对于内部的子组件，即 ./group/5 组 ID 5.

我使用一种导航方法让它工作，就像 the sample from 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>

带有 rc1 angular 路由器的子路由

SubRoutes with rc1 angular router

angular2-routing

angular