填充子路由器出口Angular2

Question

自从听说角的路由器支持嵌套<路由器出口>标签，我想用其中的两个。我使用的是最新的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级的仪表板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 { } 

尝试2仪表板routing.module.ts按照Angular2 : Multiple Router-Outlets & Router-Outlets Inside Child Route

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']); 

通过routerLink

或路由在仪表板 dashboard.component.html

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

或通过routerLink仪表板视图子路由器，网点： dashboard.component.html：

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

Answer 1

子router-outlet s在路由器配置中填充了children数组。但是重复正在进行。您应该删除dashboard进入你的AppRoutingModule里面，去尝试2：

应用的路由

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

，并保持你DashboardRoutingModule因为是它在尝试2（与孩子阵列）并在AppRoutingModule或AppModule内导入此模块。