使用`ng s`啟動項目，使用瀏覽器打開[http://localhost:4200/](http://localhost:4200/)并使用相關的用戶名密碼登錄系統。 > 可用的用戶名請訪問：[http://angular.api.codedemo.club:81/teacher/](http://angular.api.codedemo.club:81/teacher/)獲取，默認密碼為：codedemo.club ## 菜單  當前點擊班級管理菜單時將跳轉到首頁，為此我們配置班級管理菜單: ```html +++ b/first-app/src/app/nav/nav.component.html @@ -15,7 +15,7 @@ <a class="nav-link" routerLink="teacher">教師管理</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">班級管理</a> + <a class="nav-link" routerLink="clazz">班級管理</a> </li> <li class="nav-item"> <a class="nav-link" href="#">學生管理</a> ``` 如上為班級管理定義的URL地址為`clazz`，此時再次點擊班級管理菜單時，在控制臺中將出現無法匹配相關路由的錯誤：  這是由于我們尚未`clazz`路由設置任何組件的原因。 ## 設置路由 在前面的教師管理、個人中心章節中，我們是通過`AppRoutingModule`來**直接**設置路由的。在這些路由設置中有個共性是：路由對應的所有的組件，都屬于`AppModule`。為了更加的清楚路由的配置過程，我們對以下代碼進行解讀： `AppModule`在`imports`中聲明了`AppRoutingModule`: ```typescript imports: [ BrowserModule, AppRoutingModule, ?? HttpClientModule, FormsModule, RouterModule ], providers: [ {provide: HTTP_INTERCEPTORS, useClass: XAuthTokenInterceptor, multi: true} ], bootstrap: [IndexComponent] }) export class AppModule { } ``` 此時`AppModule`便可以使用`AppRoutingModule`的一些功能了（當前`AppRoutingModule`未提供任何功能）：  `AppRoutingModule`在`imports`中聲明了`RouterModule.forRoot(routes)`，其中的`routes`即為我們設置的路由。 ```typescript @NgModule({ imports: [RouterModule.forRoot(routes)], ?? exports: [RouterModule] }) export class AppRoutingModule { } ``` 所以`AppRoutingModule`實際上引入了已配置了路由的`RouterModule`  最后`AppRoutingModule`又在`exports`中聲明了`RouterModule`，這相當于把`RouterModule`傳送給了`AppModule`:  觀察上圖不難得出：Angular給出的默認示例之所以這么做，僅僅是為了將路由定義的代碼由`AppModule`中抽離出來。所以如果按下圖這樣做，也是可以直接配置路由信息的。  ## 惰性加載 在Angular中可以使用**惰性加載**來加速項目的啟動速度。**惰性加載**也可以稱為**按需加載**，即僅當用戶需要某個模塊時，才加載某個模塊。比如我們將班級管理設置為惰性加載，系統則在用戶登錄系統時不加載班級管理模塊，而僅在用戶首次訪問`http://localhost:4200/clazz`時進行加載。這樣做可以顯著的提升用戶打開應用時的等待時間。 ### 配置惰性加載 在路由配置時可以配置路由的`loadChildren`屬性來達到惰性加載的目的： ```typescript +++ b/first-app/src/app/app-routing.module.ts @@ -11,6 +11,10 @@ const routes: Routes = [ path: '', component: WelcomeComponent }, + { + path: 'clazz', + loadChildren: () => import('./clazz/clazz.module').then(m => m.ClazzModule) + }, { path: 'teacher', component: AppComponent ``` - `loadChildren`是路由的一個屬性，該屬性接收一個**回調函數**，這使得Angular可以在有需求的時候調用這個**回調函數**，從而實現了惰性加載。 - `import(xxx)`是指從`xxx`導入文件，在導入過程中省略`ts`后綴，所以上述`import`相當于`import('./clazz/clazz.module.ts')`。 - `m => m.ClazzModule`這也是一個**回調函數**。`m`為參數代表前面`import`成功的文件，所以可以使用任意的合法關鍵來替換，比如：`f => f.ClazzModule`。`m.ClazzModule`則表示文件中對應的`ClazzModule`類。 此時，當請求的url地址以`clazz`打頭時，則會惰性加載`loadChildren`中的模塊，并以該模塊中繼續查找相應的路由。為了更加清晰的明了執行過程，我們在上述惰性加載中加入一些日志： ```typescript { path: 'clazz', - loadChildren: () => import('./clazz/clazz.module').then(m => m.ClazzModule) + loadChildren: () => import('./clazz/clazz.module').then(m => { + console.log('開始加載，調用ClazzModule'); + return m.ClazzModule; + }) }, ``` 此時當**首次**點擊**班級管理**菜單時，控制臺將打印一次日志：  ### 定義路由 在訪問`clazz`時，惰性加載將路由的設置交給了`ClazzModule`。  加之剛剛上圖展示了可以直接在模塊中定義路由，故打開`ClazzModule`來嘗試進行路由定義： ```typescript +++ b/first-app/src/app/clazz/clazz.module.ts @@ -6,13 +6,22 @@ import {KlassSelectComponent} from './klass-select/klass-select.component'; import {ClazzComponent} from './clazz.component'; import {PageComponent} from './page/page.component'; import {EditComponent} from './edit/edit.component'; +import {RouterModule, Routes} from '@angular/router'; + +const routes: Routes = [ + { + path: '', + component: ClazzComponent + } +]; @NgModule({ declarations: [AddComponent, KlassSelectComponent, ClazzComponent, PageComponent, EditComponent], imports: [ CommonModule, FormsModule, - ReactiveFormsModule + ReactiveFormsModule, + RouterModule.forChild(routes) ?? ] }) export class ClazzModule { ``` 上述路由的配置基本與`AppRoutingModule`中的配置無異，不同的是使用惰性加載引用的模塊在進行路由配置時必須使用`forChild()`，而非`forRoot()`。 > `forRoot()` 在應用中只應該使用一次。  同時在控制臺發生如下錯誤（如果你在6.1.3小節中完成了使用Api攔截器的作業，則已充分的證明了自己的能力，此處將看不到如下錯誤）：  ## 本節作業 1. 請找出控制臺發生上述404錯誤的原因并嘗試修正該錯誤。 2. 點擊班級管理時，班級管理的菜單未并像教師管理一樣點亮，請修正它。 | 名稱 | 鏈接 | | ---------------- | ------------------------------------------------------------ | | 惰性加載特性模塊 | [https://angular.cn/guide/lazy-loading-ngmodules](https://angular.cn/guide/lazy-loading-ngmodules) | | `forRoot()` 模式 | [https://angular.cn/guide/singleton-services#the-forroot-pattern](https://angular.cn/guide/singleton-services#the-forroot-pattern) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.6.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.6.1.zip) |