Route 路由模块

2020-07-07 16:16 更新

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

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

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

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

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

  • 不要声明组件。

把路由集成到应用中

路由应用范例中默认不包含路由。 要想在使用 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 中的组件就可以访问路由指令了,比如 RouterLinkRouterOutlet

做完这些之后,该文件变成了这样:

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 )。

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号