## 一、特征模塊 特征模塊：組織與特定功能有關的代碼,例如，訂單或者庫存這些模塊，把這些模塊組織為特征模塊，每個模塊只關注自身的業務邏輯。 > 隨著使用特性模塊，可以把與特定的功能或特性有關的代碼從其它代碼中分離出來。 為應用勾勒出清晰的邊界，有助于開發人員之間、小組之間的協作，有助于分離各個指令，并幫助管理根模塊的大小。 1.創建特征模塊 >[info] ng generate module CustomerDashboard（模塊名） 這會讓 CLI 創建一個名叫`customer-dashboard`的文件夾，其中有一個名叫`customer-dashboard.module.ts`，內容如下： ~~~ content_copyimport { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule ], declarations: [] }) export class CustomerDashboardModule { } ~~~ 2.在特征模塊中創建組件 >[info]ng generate component customer\-dashboard/CustomerDashboard（組件名） 輸入命令后會在特征模塊中創建CustomerDashboard組件 在特征根模塊`src/app/customer-dashboard/customer-dashboard.module.ts`中導入組件 ``` // 引入組件 import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component'; @NgModule({ imports: [ CommonModule ], declarations: [ CustomerDashboardComponent ], }) ``` 3.在應用根模塊`app.module.ts`引入特征模塊 ``` import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; // 引入特征模塊 import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, CustomerDashboardModule // 添加特征模塊 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ## 二、頂級路由 頂級路由位于`app`目錄下的`app-routing.module.ts`文件 ``` const routes: Routes = [ { path: 'parent', component: ParentComponent, data:{ parent:'parent', child:'child' }, children: [ { path: "child", component: ChildComponent } ] }, { path: '', //默認打開的路由 redirectTo: '', /*重定向*/ pathMatch: 'full' }, { path: '**', /*匹配任意URL,當匹配不到定義的路由時跳轉到404組件*/ component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], //頂級路由使用RouterModule.forRoot方法注冊路由 exports: [RouterModule] }) export class AppRoutingModule { } ``` >[danger] 注意:在頂級路由中注冊路由使用RouterModule.forRoot方法，在特征模塊中注冊路由使用RouterModule.forChild方法 ## 三、特征路由 特征路由就是特征模塊中的路由，用于管理特征模塊中的路由導航。 >[info] 只在根模塊AppRoutingModule中調用RouterModule.forRoot（如果在AppModule中注冊應用的頂級路由，那就在AppModule中調用）。 在其它模塊中，你就必須調用RouterModule.forChild方法來注冊附屬路由。 特征模塊中的路由： ``` import { NgModule } from '@angular/core'; import { RouterModule, Routes } 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) //特征路由使用RouterModule.forChild方法注冊路由 ], exports: [ RouterModule ] }) export class HeroesRoutingModule { } ```