顶级路由和特征路由 · Angular学习文档

## 一、特征模块特征模块：组织与特定功能有关的代码,例如，订单或者库存这些模块，把这些模块组织为特征模块，每个模块只关注自身的业务逻辑。 > 随着使用特性模块，可以把与特定的功能或特性有关的代码从其它代码中分离出来。为应用勾勒出清晰的边界，有助于开发人员之间、小组之间的协作，有助于分离各个指令，并帮助管理根模块的大小。 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 { } ```