Create a detail view under a parent route

问题

You surely know the heroes sample from angular 2 tutorial:

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

When you click one of those 4 top heroes you get from the /dashboard url to the detail/id url.

That the whole dashboard component is switched with the detail component is fine!

What I would like to have changed is that the url changes from /dashboard to /dashboard/detail/id

So in my route config I just change

path: '/detail/:id',

to

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

That works but when the dashboard url is changed then the /dashboard/detail/:id url makes no sense anymore.

I would like to configure the detail route depending to the 'parent' route.

How can I do this?

回答1:

I've changed routing to show how it can be done, see plunkr.

In general it is done using non-terminal routes and child routers.

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

来源：https://stackoverflow.com/questions/36728297/create-a-detail-view-under-a-parent-route