在父路由下创建详细视图

Question

你肯定知道angular2教程中的英雄样本：

https://angular.io/resources/live-examples/toh-5/ts/plnkr.html

当您点击这 4 个顶级英雄中的一个时，您会从 /dashboard url 转到 detail/id url。

整个dashboard组件和detail组件切换就好了！

我想更改的是 url 从 /dashboard 更改为 /dashboard/detail/id

所以在我的路由配置中，我只是更改

path: '/detail/:id',

至

  path: '/dashboard/detail/:id',

这行得通，但是当仪表板 url 更改后，/dashboard/detail/:id url 就不再有意义了。

我想根据 'parent' 路线配置详细路线。

我该怎么做？

Answer 1

我已经更改路由以展示如何完成，请参阅 plunkr。

一般是使用非终端路由和子路由器完成的。

{
  path: '/dashboard/...',
  name: 'Dashboard',
  component: DashboardComponent,
  useAsDefault: true
}

Create a detail view under a parent route