angular+ 路由学习（二）路由模块化

• 小白建议：先了解Observable和Rxjs后，再了解路由，因为后面会涉及到获取路由参数的知识点
• 路由模块化即将某一个模块相关的组件视图等文件放在一个模块区域里，以方便管理
• 如官方文档中：src/app/heroes 目录结构一样，将heroes特征模块化；目录结构如下：

 

•  heroes-routing.module.ts 和heroes.module.ts 负责heroes模块等导航；然后再将该模块导入到主模块中；

• ng g module heroes/heroes --module --flat --routing
  // 这里指 创建heroes.module 在/heroes目录下
  
  // 在主目录下创建路由
  ng g module app-routing --flat --module=app;
  // 另一种命令方式，效果一样
  ng g module app-routing --module app --flat ；

   

• 配置heroes.module.ts

• import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  
  // 组件导入
  import { HeroListComponent } from './hero-list/hero-list.component';
  import { HeroDetailComponent } from './hero-detail/hero-detail.component';
  // 路由导入
  import { HeroesRoutingModule } from './heroes-routing.module';
  
  @NgModule({
    declarations: [
      HeroListComponent,
      HeroDetailComponent
    ],
    imports: [
      CommonModule,
      FormsModule,
      HeroesRoutingModule
    ]
  })
  export class HeroesModule { }

   

• 配置heroes-routing.module.ts

• import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HeroListComponent } from './hero-list/hero-list.component';
  import { HeroDetailComponent } from './hero-detail/hero-detail.component';
  // 路由配置
  const heroesRoutes: Routes = [
    {path: 'heroes', component: HeroListComponent},
    {path: 'hero/:id', component: HeroDetailComponent}
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(heroesRoutes)], 
    exports: [RouterModule]
  })
  export class HeroesRoutingModule { }

   

• 将heroes模块导入主模块中；注意导入的路由顺序不可以随意，因为路由配置优先匹配原则；同时要移除主模块中 重复的heroes模块导入；
• app-routing.module.ts中：

• import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { CrisisListComponent } from './crisis-list/crisis-list.component';
  
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  // 移除
  // import { HeroListComponent } from './heroes/hero-list/hero-list.component';
  // import { HeroDetailComponent } from './heroes/hero-detail/hero-detail.component';
  
  
  const routes: Routes = [
    { path: 'crisis-center', component: CrisisListComponent },
    { path: '', redirectTo: 'heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
  
  ];
  //.forRoot()-- 在应用的顶级配置路由器，提供路由需要的服务提供商和指令，基于浏览器当前URL执行首次导航
  // enableTarcing -- 查看导航在生命周期中发生的事件，并输出到控制台
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, { enableTracing: true })
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }

   

• AppModule.ts中：

• import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  import { HeroesModule } from './heroes/heroes.module';
  
  import { CrisisListComponent } from './crisis-list/crisis-list.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  // import { HeroListComponent } from './heroes/hero-list/hero-list.component';
  // import { HeroDetailComponent } from './heroes/hero-detail/hero-detail.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      CrisisListComponent,
      PageNotFoundComponent,
      // HeroListComponent,   //移除
      // HeroDetailComponent  //移除
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HeroesModule,  // 先导入子模块的路由
      AppRoutingModule // 再导入主模块的路由
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }