填充子路由器出口Angular2

Question

由于我听说Angular的路由器支持嵌套的<router-outlet>标签,我正在尝试使用其中的两个.我正在使用最新的Angular-CLI,从ui-router转换为Angular的路由器.我无法获得第二个路由器来填充内容.

(父路由工作正常)app-routing.module.ts

...
const routes: Routes = [
    { path: '', pathMatch: 'full', component: LoginComponent },
    { path: 'login', pathMatch: 'full', component: LoginComponent },
    { path: 'dashboard',
        pathMatch: 'full',
        component: DashboardComponent // this holds the second router-outlet
    },
    { path: '**', component: LoginComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

app.component.ts - 这只是持有路由器插座,并在顶层工作正常...

<router-outlet></router-outlet>

仪表板包含通用页眉,页脚,侧边栏等.这就是我想在顶级路由器插座中使用它的原因.子路由器插座将填充子视图,但不会填充.

尝试1 dashboard-routing.module.ts

export const dashboardRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', pathMatch: 'full', component: HomeComponent },
    { path: 'about', pathMatch: 'full', component: AboutComponent }
]
@NgModule({
    imports: [
        RouterModule.forChild(dashboardRoutes)
    ],
    exports: [ RouterModule ]
})
export class DashboardRoutingModule { }

根据Angular2尝试2个dashboard-routing.module.ts :子路由内的多个路由器插座和路由器插座

export const dashboardRoutes: Routes = [
    {
        path: 'dashboard',
        children:[
            { path: '', component: DashboardComponent},
            { path: 'home', component: HomeComponent},
            { path: 'about', component: AboutComponent}
        ]
    }
 ]
@NgModule({
    imports: [
        RouterModule.forChild(dashboardRoutes)
    ],
    exports: [ RouterModule ]
})
export class DashboardRoutingModule { }

在仪表板模板内部,此嵌套路由器插座不会填充.相反,填充了app.component.html中的顶级路由器插座:(

dashboard.component.html

<header>...</header>
<aside class="sidenav">...<aside>

<!-- why can't I populate you? -->
<router-outlet></router-outlet>

**************回答,非常感谢PierreDuc!**************

APP-routing.module.ts

// seems counter-intuitive that the dashboard component isn't actually in here..., but it works!
const routes: Routes = [
    { path: '', pathMatch: 'full', component: LoginComponent },
    { path: 'login', pathMatch: 'full', component: LoginComponent },
    { path: '**', component: LoginComponent }
];
@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        DashboardRoutingModule // this is the magic. I'm assuming to put it second is better (though putting it first didn't seem to have any immediate negative effect)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

仪表板routing.module.ts

export const dashboardRoutes: Routes = [
    {
        path: 'dashboard',
        component: DashboardComponent,
        children:[
            { path: '', component: HomeComponent },
            { path: 'home', pathMatch: 'full', component: HomeComponent },
            { path: 'about', pathMatch: 'full', component: AboutComponent }
        ]
    }
]
@NgModule({
    imports: [
        RouterModule.forChild(dashboardRoutes)
    ],
    exports: [ RouterModule ]
})
export class DashboardRoutingModule { }

以下是从根目录导航的方法:

login.component.ts

... passed validation ...
this._router.navigate(['/dashboard']);
this._router.navigate(['/dashboard/home']);

或通过路由器链接通过仪表板dashboard.component.html中的侧栏进行路由

[routerLink]="['../login']" <!-- back to login, though the '../' seems less than ideal

或者通过routerLink到子路由器插座的仪表板视图:dashboard.component.html:

[routerLink]="['../about']"

Answer 1

子router-outlet节点填充children了路由器配置中的阵列.但是还有重复.你应该删除你dashboard内部的条目AppRoutingModule,然后去尝试2:

APP-路线

const routes: Routes = [
    { path: '', pathMatch: 'full', component: LoginComponent },
    { path: 'login', pathMatch: 'full', component: LoginComponent },
    { path: '**', component: LoginComponent }
];

并保持你的DashboardRoutingModule尝试2(与子数组),并导入此模块在AppRoutingModule或在AppModule.