Angular2和具有多个可选参数的路由

Question

我有一个 Angular2 应用程序，它有一个带有多个路由参数的模块，其中一些是可选的。路由在 Angular 本身内部工作得很好，但如果直接使用，生成的 URL 会中断。我正在努力找出原因。我也在尝试解决当/champion 被访问时如何使链接处于活动状态，无论参数是什么。

模块中定义的路由

RouterModule.forChild([
  { path: 'champion/:id', component: ChampionComponent },
  { path: 'champion/:id/:version', component: ChampionComponent }
])

链接（点击时有效）

<a class="item" [routerLink]="['/champion', 1, '7.9.1']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">Champion Analysis</a>

但尝试直接访问 URL (localhost:5555/champion/1/7.9.1) 失败并显示Cannot GET /champion/1/7.9.1

编辑：我应该注意它只是失败的第二条路线。在地址栏中输入localhost:5555/champion/1 可以正常工作。

Answer 1

尝试交换路由线。

RouterModule.forChild([
  { path: 'champion/:id/:version', component: ChampionComponent },
  { path: 'champion/:id', component: ChampionComponent }
])

Order matters（从锚点向下滚动一点）