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

里程碑 2：路由模塊

這個里程碑會向你展示如何配置一個名叫路由模塊的專用模塊，它會保存你應用的路由配置。

路由模塊有以下幾個特點：

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

把路由集成到應用中

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

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

ng generate module my-module --routing

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

將路由配置重構為路由模塊

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

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

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

把 Angular 的 ?RouterModule ?添加到該模塊的 ?exports ?數(shù)組中，以便再次導出它。通過再次導出 ?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 ?數(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)建多個路由模塊，并以正確的順序導入這些路由模塊。

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

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

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

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

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

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