angle 4 - コンポーネント内でのルーティング（子ルート）が正しく動作しない

Question

最近、angular4の学習を開始しました。私は角ルーティング文書に続き、子ルーティングの簡単な機能を実装し始めました。そして私はそれに立ち往生しています。以下は私のコードです。誰でも私が間違っていることを教えてもらえますか？

ダッシュボードモジュールは、独自のルートを持つルートモジュールにインポートされます。ダッシュボードcompoentにリダイレクトデフォルトルートを有する app/app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; 
import { DashboardModule } from './dashboard/dashboard.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    PageNotFoundComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    DashboardModule, 
    AppRoutingModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

ルートレベルのルーティングモジュール。 app/app-routing.module.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { LoginComponent } from './login/login.component'; 
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; 

const routes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'dashboard', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'dashboard', 
    loadChildren: 'app/dashboard/dashboard.module#DashboardModule', 
    data: {preload: true} 
    }, 
    { 
    path: 'login', 
    component: LoginComponent, 
    }, 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    } 
]; 

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

これは app/dashboard/dashboard-routing.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Route } from '@angular/router'; 
import { DispatchesComponent } from './dispatches/dispatches.component'; 
import { DashboardComponent } from './dashboard.component'; 
import { TransactionsComponent } from './transactions/transactions.component'; 

const dashBoardRoutes : Route[] = [ 
    { 
    path: 'dashboard', 
    component: DashboardComponent, 
    pathMatch: 'full', 
    children: [ 
     { 
     path: 'dispatches', 
     component: DispatchesComponent 
     }, 
     { 
     path: 'txns', 
     component: TransactionsComponent 
     }, 
     { 
     path: '', 
     component: DispatchesComponent, 
     pathMatch: 'full' 
     }, 
    ] 
    }, 
] 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(dashBoardRoutes) 
    ], 
    declarations: [], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class DashboardRoutingModule { } 

ダッシュボードモジュールに存在する子ルートのルーティング設定され、最終的に私が app/dashboard/dashboard.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { DashboardComponent } from './dashboard.component'; 
import { RouterModule } from '@angular/router'; 
import { SharedModule } from './../shared/shared.module'; 
import { DashboardRoutingModule } from './dashboard-routing.module'; 
import { DispatchesModule } from './dispatches/dispatches.module'; 
import { TransactionsModule } from './transactions/transactions.module'; 


@NgModule({ 
    imports: [ 
    DispatchesModule, 
    CommonModule, 
    SharedModule, 
    TransactionsModule, 
    RouterModule, 
    DashboardRoutingModule, 
    ], 
    declarations: [DashboardComponent] 
}) 
export class DashboardModule { } 

そして、ここでダッシュボードのモジュールにこれらのルートをインポートダッシュのhtmlです私はlocalhost:4200に移動するとoard成分 dashboard.component.html

<p> 
    dashboard works! 
</p> 
<button routerLink="/login">Go to login</button> 
<div> 
    <app-sidebar></app-sidebar> 
</div> 
<div class="dashboard-routes"> 
    <button routerLink="dispatches">dispatches</button> 
    <button routerLink="txns">Transactions</button> 
</div> 
<div> 
    <router-outlet></router-outlet> 
</div> 

それはsucessfullyその内部期待して表示ディスパッチコンポーネントとしてダッシュボードにリダイレクトします。

しかし、ディスパッチまたはtxnsのいずれかをクリックしたとき。これらの子コンポーネントはダッシュボード内にレンダリングされませんrouter-outlet。このページに進む

私は間違っていますか？あなたはに移動する必要があるだろう、DashboardComponentをレンダリングするために、古い構成で

import { Routes } from '@angular/router'; 

const dashBoardRoutes : Routes = [ 
    { 
    path: '', 
    component: DashboardComponent, 
    children: [ 
     { 
     path: 'dispatches', 
     component: DispatchesComponent 
     }, 
     { 
     path: 'txns', 
     component: TransactionsComponent 
     }, 
     { 
     path: '', 
     component: DispatchesComponent 
     }, 
    ] 
    }, 
] 

：

Answer 1

は、以下の変更を行いますが、接頭辞いるので

root/dashboard/dashboard 

ですdashboardのすべての遅延ロードされたルートはすでにメインルーティング設定にあります。