Three levels of Routing

Question

Plunkr for 3 Levels of Menu

I am trying to have 3 levels of Menu, but can't seem to get it right

 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 })

From the Left Menu, I want to load the selected page in the content(center of the page)

Answer 1

Plunker example

I made several changes.

A component can't only have named outlets. Exactly one outlet has to be unnamed. <router-outlet></router-outlet> (in src/app.html)

I completed the routes (and changed them to all-lowercase but that might not be necessary - I did it just to prevent case errors)

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 lins for the content components to

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

with the links array like

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