带有 rc1 角度路由器的子路由答案

【问题标题】：SubRoutes with rc1 angular router带有 rc1 角度路由器的子路由
【发布时间】：2016-05-17 17:43:20
【问题描述】：

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

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

但如果我尝试这样导航：

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

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

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

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

所以现在我的联系人组件已加载，但我在 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 路由器进行非终端路径的子路由吗？

【问题讨论】：

你应该使用@angular/router-deprecated，因为新的路由器仍然充满了错误
我们正处于一个新项目的开始阶段。恐怕将已弃用的路由器更改为新的路由器会花费太多时间，因此我们现在就这样做，因为要更改的东西不多

标签： angular angular2-routing

【解决方案1】：

我假设您的网址是这样的：/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>

【讨论】：

您使用 ['/link', param] 的建议奏效了。但是一旦我尝试通过 {name: val} 传递参数 - 它就会停止工作。也许有某种配置可以改变这种行为？因为这就是旧路由器的工作方式，而 angular2 文档显示即使现在它也应该以这种方式工作。
是的，我认为它仍在开发中，因此您现在可能想使用 select 方法。您也可以将链接的 href 设置为“'{{'./' + group.id}}”`

【解决方案2】：

我认为关键是它正在尝试

你可以试试这样的

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

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

希望对你有帮助

【讨论】：