angular 4 - 组件内的路由(子路由)不能正常工作

Question

我最近开始学习angular4,目前正致力于角度路由.我遵循了角度路由文档,并开始实现子路由的一些简单功能.我坚持不懈.以下是我的代码.谁能告诉我我做错了什么？

仪表板模块导入到根模块中,该模块有自己的路由. 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 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在主路由配置中已经为所有延迟加载的路由添加前缀.