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