填充子路由器出口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內導入此模塊。