AngularJS5.0 (第五篇)

新建app-routing.module.ts

1import { NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { RouterModule, Routes } from '@angular/router';
4
5import { LoginComponent } from './components/login/login.component';
6import { VesselComponent } from './components/vessel/vessel.component';
7import { Page404Component } from './components/page404/page404.component';
8import { ArchivesComponent } from './components/archives/archives.component';
9import { SearchComponent } from './components/archives/subs/search/search.component';
10import { CreateComponent } from './components/archives/subs/create/create.component';
11
12const routes: Routes = [
13  { path: 'login', component: LoginComponent, data: { name: 'login!' } },
14  { path: 'vessel', component: VesselComponent, data: { name: 'vessel!' },
15    children: [
16      { path: 'archives', component: ArchivesComponent, data: { name: 'archives!' },
17        children: [
18          { path: 'search', component: SearchComponent, data: { name: 'search!' } },
19          { path: 'create', component: CreateComponent, data: { name: 'create!' } },
20          { path: '', redirectTo: '/vessel/archives/search', pathMatch: 'full' }
21        ]
22      },
23      // 四个子路由用懒加载方式加载
24      // { path: 'archives', loadChildren: './components/archives/archives.module#ArchivesModule' },
25      // { path: 'evaluation', loadChildren: './components/evaluation/evaluation.module#EvaluationModule' },
26      // { path: 'train', loadChildren: './components/train/train.module#TrainModule' },
27      // { path: 'indent', loadChildren: './components/indent/indent.module#IndentModule' },
28      { path: '', redirectTo: '/vessel/archives/search', pathMatch: 'full' }
29    ]
30  },
31  { path: '', redirectTo: '/login', pathMatch: 'full' },
32  { path: '**', component: Page404Component }
33];
34
35@NgModule({
36  imports: [
37    CommonModule,
38    RouterModule.forRoot(
39      routes,
40      // { enableTracing: true } // <-- debugging purposes only
41    )
42  ],
43  exports: [
44    RouterModule
45  ],
46  declarations: []
47})
48export class AppRoutingModule { }

在app.module.ts中注入自定义的路由表

1import { AppRoutingModule } from './app-routing.module'; /*路由模块*/
2imports: [ /*引入当前模块运行依赖的其他模块*/
3    BrowserModule,
4    FormsModule,
5    HttpClientModule,
6    AppRoutingModule
7  ],