在父路线下创建详细视图

Question

你肯定知道角度2教程中的英雄样本：

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

当您点击这4个顶级英雄中的一个时，您可以从/ dashboard网址到详细信息/ ID网址。

使用详细信息组件切换整个仪表板组件很好！

我希望更改的是网址从/dashboard更改为/dashboard/detail/id

所以在我的路线配置中，我只需更改

path: '/detail/:id',

到

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

虽然有效，但当仪表板网址发生变化时，/dashboard/detail/:id网址就不再有意义了。

我想根据父母＆＃39;来配置详细路线。路由。

我该怎么做？

Answer 1

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

通常，它使用非终端路由和子路由器完成。

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