Route 路由模块

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

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

把路由这个关注点从其它应用类关注点中分离出去。

测试特性模块时，可以替换或移除路由模块。

为路由服务提供者（如守卫和解析器等）提供一个众所周知的位置。

不要声明组件。

把路由集成到应用中

路由应用范例中默认不包含路由。要想在使用 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。

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

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 数组中移除 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 { }

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

路由模块的优点

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

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

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

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