子ルータ/コンセントへの挿入Angular2

Question

Angular's Routerがネストされた<ルータ出口>タグをサポートしていると聞いたので、私はそれらの2つを使用しようとしています。私は最新のAngular-CLIを使って、ui-routerからAngular's Routerへの変換を行っていますが、2番目のルータ - コンセントからコンテンツを取り込むことができません。 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にありがとうございました！**************

アプリ-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 { } 

はここでルートからナビゲートする方法は次のとおりです。ダッシュボードにサイドバーを経由して dashboard.component.htmlをrouterLink経由

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

またはルーティングを

login.component.ts

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

、ダッシュボードビューでrouterLink経由の子ルーターアウトレット： dashboard.component.html：

の

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

Answer 1

子router-outlet Sは、ルータの設定内部children配列が移入されています。しかし、重複が続いています。、

アプリ-ルート

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

と（子供アレイと）それが試み2であるであるとして、あなたのDashboardRoutingModuleを保つ：あなたのAppRoutingModule内dashboardエントリを削除し、そして試み2のために行く必要がありますこのモジュールをAppRoutingModuleまたはAppModuleにインポートします。