我最近开始学习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
中呈现 . 并转到下面这个页面
我究竟做错了什么?
1 回答
进行以下更改:
使用旧配置,要渲染
DashboardComponent
,您需要导航到:这是因为您在主路由配置中已经为所有延迟加载的路由添加前缀
dashboard
.