三级路由

Question

Plunkr 3级菜单

我想尝试3级菜单,但似乎无法做到正确

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

从左侧菜单,我想在内容中加载所选页面(页面中心)

Answer 1

Plunker的例子

我做了几处改动.

组件不仅可以具有命名出口.确切地说,一个出口必须是未命名的.<router-outlet></router-outlet>(中src/app.html)

我完成了路线(并将它们改为全小写,但可能没有必要 - 我这样做只是为了防止出现错误)

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

我将内容组件的路由器lins更改为

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

与links数组一样

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