三级路由

Question

Plunkr for 3 Levels of Menu

我正在尝试使用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 example

我做了一些改变。

组件不能只有指定的出口。确切地说，一个出口必须是未命名的。 <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' },
];