Three routing layers

Question

Plunkr for 3 menu levels

I am trying to have 3 menu levels but don't seem to understand.

RouterModule.forRoot([ { path: '', component: PagesComponent, pathMatch: 'full'}, { path: 'Page1', component: Page1Component, outlet: 'leftMenu'}, { path: 'Page1/Page1Child1', component: Page1Child1Component, outlet: 'contentOutlet'}, { path: 'Page2', component: Page2Component, outlet: 'leftMenu'} ], { enableTracing: true }) 

In the left menu I want to load the selected page into the content (in the center of the page)

Answer 1

Plunger example

I made a few changes.

A component can have more than just point names. Exactly one exit must be nameless. <router-outlet></router-outlet> (in src/app.html )

I completed the routes (and changed them to all lowercase, but this may not be necessary), I did this only to prevent errors in the case)

 RouterModule.forRoot([ { path: '', component: PagesComponent, pathMatch: 'full'}, { path: 'page1', component: Page1Component, outlet: 'leftMenu'}, { path: 'page1/page1child1', component: Page1Child1Component, outlet: 'contentOutlet'}, { path: 'page1/page1child2', component: Page1Child2Component, outlet: 'contentOutlet'}, { path: 'page2', component: Page2Component, outlet: 'leftMenu'}, { path: 'page2/page2child1', component: Page2Child1Component, outlet: 'contentOutlet'}, { path: 'page2/page2child2', component: Page2Child2Component, outlet: 'contentOutlet'}, ] 

I changed the router interfaces for the content components to

 <a [routerLink]="['/', {outlets: {contentOutlet: item.url}}]" routerLinkActive="active" >{{item.display}}</a> 

with links array e.g.

 links: any[] = [ { url: 'page1/page1child1', display: 'Page1Child1' }, { url: 'page1/page1child2', display: 'Page1Child2' }, ];