角度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 { } 

這裏在dashb中是html 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> 

當我導航到localhost:4200它成功地重定向到儀表盤作爲內它預期和顯示分派組件。

但是當我點擊發送或txns。這些子組件不在儀表板內呈現router-outlet。並採取以下頁面

我做錯了什麼？

Answer 1

執行以下更改：

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

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

隨着舊的配置，呈現DashboardComponent，您需要導航到：

root/dashboard/dashboard 

這是因爲你的前綴dashboard的所有延遲加載路由已經在主路由配置中。