Route 路由模塊

本節(jié)會向你展示如何配置一個名叫路由模塊的專用模塊，它會保存你應(yīng)用的路由配置。

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

• 把路由這個關(guān)注點從其它應(yīng)用類關(guān)注點中分離出去。

• 測試特性模塊時，可以替換或移除路由模塊。

• 為路由服務(wù)提供者（如守衛(wèi)和解析器等）提供一個眾所周知的位置。

• 不要聲明組件。

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

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

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

ng generate module my-module --routing

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

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

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

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

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

把 Angular 的 RouterModule 添加到該模塊的 exports 數(shù)組中，以便再次導(dǎo)出它。 通過再次導(dǎo)出 RouterModule，當(dāng)在 AppModule 中導(dǎo)入了 AppRoutingModule 之后，那些聲明在 AppModule 中的組件就可以訪問路由指令了，比如 RouterLink 和 RouterOutlet。

做完這些之后，該文件變成了這樣：

Path："src/app/app-routing.module.ts" 。

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。

Path："src/app/app.module.ts" 。

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 { }

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

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

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

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

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

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