trzech poziomach Routing

Question

Plunkr for 3 Levels of Menu

Próbuję mają 3 poziomy menu, ale nie wydaje się uzyskać to prawo

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

Z menu po lewej stronie, chcę, aby załadować wybraną stronę w treści (środek strony)

Answer 1

Plunker example

zrobiłem kilka zmian.

Komponent może nie tylko nazwać wyloty. Dokładnie jedno miejsce docelowe musi być bez nazwy. <router-outlet></router-outlet> (w src/app.html)

ukończyłem trasy (i zmienił je na wszystkie małe, ale to może nie być konieczne - Zrobiłem to, żeby uniknąć błędów przypadków)

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'}, 
     ] 

zmieniłem Lins routera dla zawartość składników do

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

z tablicy jak

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