Create a detailed view of the parent route

Question

You probably know the sample heroes from the angular 2 tutorial:

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

When you click one of these four main characters, you get from url / dashboard to the detail / id url.

So that the entire toolbar component is included with the detailed component, this is normal!

What I would like to change is that the url changes from /dashboardto/dashboard/detail/id

So, in my route configuration, I just change

path: '/detail/:id',

to

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

This works, but when the toolbar URL changes, the URL /dashboard/detail/:idno longer makes sense.

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

How can i do this?

Answer 1

, , , . plunkr.

.

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