Angular 教程：為英雄之旅添加路由支持-里程碑 2：路由模塊

里程碑 2：路由模塊

這個(gè)里程碑會(huì)向你展示如何配置一個(gè)名叫路由模塊的專用模塊，它會(huì)保存你應(yīng)用的路由配置。

路由模塊有以下幾個(gè)特點(diǎn)：

• 把路由這個(gè)關(guān)注點(diǎn)從其它應(yīng)用類關(guān)注點(diǎn)中分離出去。
• 測(cè)試特性模塊時(shí)，可以替換或移除路由模塊。
• 為路由服務(wù)提供者（如守衛(wèi)和解析器等）提供一個(gè)眾所周知的位置。
• 不要聲明組件。

把路由集成到應(yīng)用中

路由應(yīng)用范例中默認(rèn)不包含路由。要想在使用 Angular CLI 創(chuàng)建項(xiàng)目時(shí)支持路由，請(qǐng)為項(xiàng)目或應(yīng)用的每個(gè) NgModule 設(shè)置 ?--routing? 選項(xiàng)。當(dāng)你用 CLI 命令 ?ng new? 創(chuàng)建新項(xiàng)目或用 ?ng generate app? 命令創(chuàng)建新應(yīng)用，請(qǐng)指定 ?--routing? 選項(xiàng)。這會(huì)告訴 CLI 包含上 ?@angular/router? 包，并創(chuàng)建一個(gè)名叫 ?app-routing.module.ts? 的文件。然后你就可以在添加到項(xiàng)目或應(yīng)用中的任何 NgModule 中使用路由功能了。

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

ng generate module my-module --routing

這將創(chuàng)建一個(gè)名叫 ?my-module-routing.module.ts? 的獨(dú)立文件，來保存這個(gè) NgModule 的路由信息。該文件包含一個(gè)空的 ?Routes ?對(duì)象，你可以使用一些指向各個(gè)組件和 NgModule 的路由來填充該對(duì)象。

將路由配置重構(gòu)為路由模塊

在 ?/app? 目錄下創(chuàng)建一個(gè) ?AppRouting ?模塊，以包含路由配置。

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

導(dǎo)入 ?CrisisListComponent?、?HeroListComponent ?和 ?PageNotFoundCompponent ?組件，就像 ?app.module.ts? 中那樣。然后把 ?Router ?的導(dǎo)入語句和路由配置以及 ?RouterModule.forRoot()? 移入這個(gè)路由模塊中。

把 Angular 的 ?RouterModule ?添加到該模塊的 ?exports ?數(shù)組中，以便再次導(dǎo)出它。通過再次導(dǎo)出 ?RouterModule?，當(dāng)在 ?AppModule ?中導(dǎo)入了 ?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 ?數(shù)組中移除 ?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 { }

稍后，本指南將向你展示如何創(chuàng)建多個(gè)路由模塊，并以正確的順序?qū)脒@些路由模塊。

應(yīng)用繼續(xù)照常運(yùn)行，你可以把路由模塊作為將來每個(gè)模塊維護(hù)路由配置的中心位置。

路由模塊的優(yōu)點(diǎn)

路由模塊（通常稱為 ?AppRoutingModule?）代替了根模板或特性模塊中的路由模塊。

這種路由模塊在你的應(yīng)用不斷增長(zhǎng)，以及配置中包括了專門的守衛(wèi)和解析器服務(wù)時(shí)會(huì)非常有用。

在配置很簡(jiǎn)單時(shí)，一些開發(fā)者會(huì)跳過路由模塊，并將路由配置直接混合在關(guān)聯(lián)模塊中（比如 ?AppModule?）。

大多數(shù)應(yīng)用都應(yīng)該采用路由模塊，以保持一致性。它在配置復(fù)雜時(shí)，能確保代碼干凈。它讓測(cè)試特性模塊更加容易。它的存在讓人一眼就能看出這個(gè)模塊是帶路由的。開發(fā)者可以很自然的從路由模塊中查找和擴(kuò)展路由配置。