使用`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) |