英雄之旅模式 Angular 教程：为英雄之旅添加路由支持-里程碑 2：路由模块

里程碑 2：路由模块

这个里程碑会向你展示如何配置一个名叫路由模块的专用模块，它会保存你应用的路由配置。

路由模块有以下几个特点：

• 把路由这个关注点从其它应用类关注点中分离出去。
• 测试特性模块时，可以替换或移除路由模块。
• 为路由服务提供者（如守卫和解析器等）提供一个众所周知的位置。
• 不要声明组件。

把路由集成到应用中

路由应用范例中默认不包含路由。要想在使用 Angular CLI 创建项目时支持路由，请为项目或应用的每个 NgModule 设置 ​--routing​ 选项。当你用 CLI 命令 ​ng new​ 创建新项目或用 ​ng generate app​ 命令创建新应用，请指定 ​--routing​ 选项。这会告诉 CLI 包含上 ​@angular/router​ 包，并创建一个名叫 ​app-routing.module.ts​ 的文件。然后你就可以在添加到项目或应用中的任何 NgModule 中使用路由功能了。

比如，可以用下列命令生成带路由的 NgModule。

ng generate module my-module --routing

这将创建一个名叫 ​my-module-routing.module.ts​ 的独立文件，来保存这个 NgModule 的路由信息。该文件包含一个空的 ​Routes ​对象，你可以使用一些指向各个组件和 NgModule 的路由来填充该对象。

将路由配置重构为路由模块

在 ​/app​ 目录下创建一个 ​AppRouting ​模块，以包含路由配置。

ng generate module app-routing --module app --flat

导入 ​CrisisListComponent​、​HeroListComponent ​和 ​PageNotFoundCompponent ​组件，就像 ​app.module.ts​ 中那样。然后把 ​Router ​的导入语句和路由配置以及 ​RouterModule.forRoot()​ 移入这个路由模块中。

把 Angular 的 ​RouterModule ​添加到该模块的 ​exports ​数组中，以便再次导出它。通过再次导出 ​RouterModule​，当在 ​AppModule ​中导入了 ​AppRoutingModule ​之后，那些声明在 ​AppModule ​中的组件就可以访问路由指令了，比如 ​RouterLink ​和 ​RouterOutlet​。

做完这些之后，该文件变成了这样。

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { CrisisListComponent } from "./crisis-list/crisis-list.component";
import { HeroListComponent } from "./hero-list/hero-list.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

const appRoutes: Routes = [
  { path: "crisis-center", component: CrisisListComponent },
  { path: "heroes",        component: HeroListComponent },
  { path: "",   redirectTo: "/heroes", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

接下来，修改 ​app.module.ts​ 文件，从 ​imports ​数组中移除 ​RouterModule.forRoot​。

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

import { CrisisListComponent } from "./crisis-list/crisis-list.component";
import { HeroListComponent } from "./hero-list/hero-list.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

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

稍后，本指南将向你展示如何创建多个路由模块，并以正确的顺序导入这些路由模块。

应用继续照常运行，你可以把路由模块作为将来每个模块维护路由配置的中心位置。

路由模块的优点

路由模块（通常称为 ​AppRoutingModule​）代替了根模板或特性模块中的路由模块。

这种路由模块在你的应用不断增长，以及配置中包括了专门的守卫和解析器服务时会非常有用。

在配置很简单时，一些开发者会跳过路由模块，并将路由配置直接混合在关联模块中（比如 ​AppModule​）。

大多数应用都应该采用路由模块，以保持一致性。它在配置复杂时，能确保代码干净。它让测试特性模块更加容易。它的存在让人一眼就能看出这个模块是带路由的。开发者可以很自然的从路由模块中查找和扩展路由配置。