如果仔细观察，我们会发现当前系统有个严重的BUG，那就是在首页直接显示了班级的内容，并且还可以在首页进行班级的CRUD操作。这与我们点击**班级管理**菜单后在惰性的加载班级模块的初衷是不相符的。而造成这个问题在于我们没有删除App模块中的冗余的imports。  ## 深入imports 在angular中，我们接触了两个相似的代码：`import`与`imports`，其实这两个是有本质的区别的，比如在app.module.ts： ``` import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppRoutingModule} from './app-routing.module'; import {AppComponent} from './app.component'; import {HttpClientModule} from '@angular/common/http'; import {TeacherAddComponent} from './teacher/teacher-add.component'; import {FormsModule} from '@angular/forms'; import {TeacherEditComponent} from './teacher/teacher-edit.component'; import {TeacherIndexComponent} from './teacher/teacher-index.component'; import① {KlassModule} from './klass/klass.module'; @NgModule({ declarations: [ AppComponent, TeacherAddComponent, TeacherEditComponent, TeacherIndexComponent ], imports:② [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule, KlassModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ① import我们当前可以认为是typescript的语法，`import {KlassModule} from './klass/klass.module';`表示由`./klass/klass.module`找到`KlassModule`来过来帮忙，相当于php中的use以及java中的import。不同于php及java，typescript需要我们手动的指定文件的位置。 ① 凡是可以被import的被引用者必须用export关键字来修饰，比如我们如下声明了班级模块`export class KlassModule`，如果我们将`export`关键字去掉，那么其它的typescript文件就无法进行import了(**请自行尝试**）。 ② imports是则angular`@NgModule`注解的一个属性，它的作用是设置：The set of NgModules whose exported [declarables](guide/glossary#declarable) are available to templates in this module(载入声明块中的declarables至当前组件的模板)。 | | 使用环境 | 作用 | 前提 | | --- | --- | --- | --- | | import | typescript | 引入某个文件中的某个（类、对象、变量..) | 被引入者需要使用export关键字进行声明 | | imports | angular | 引入其它模块，并将其它模块中使用declarables声明的组件等加载到当前模块的模板 | 被引入者需要使用@NgModule声明为模块 | ## 层级依赖 为了弄清楚imports究竟发生了什么，我们在klass文件夹下，创建一个用于测试的模块TestModule. klass/test.module.ts ``` import {NgModule} from '@angular/core'; /** * 测试模块 */ @NgModule({ }) export class TestModule { private randNum = Math.random(); ➋ constructor() { ➊ console.log(`test module ${this.randNum} constructor`); } } ``` * ➊ 如果执行了实例化过程，则会调用构造函数，进而在控制台中打印日志。 * ➋ 每根据此类实例化一个对象，都会重新生成一个随机数。 然后在班级模块中引用它，同时为班级模块添加构造函数以监听其实例化的过程 klass/klass.module.ts ``` /** * 班级模块 */ @NgModule({ declarations: [IndexComponent, AddComponent, EditComponent], imports: [ CommonModule, FormsModule, ReactiveFormsModule, RouterModule.forChild(routes), TestModule ➊ ], exports: [ RouterModule ] }) export class KlassModule { private randNum = Math.random(); constructor() { console.log(`klass module ${this.randNum} constructor`); } } ``` * ➊ 引入TestModule #### 测试 我们打开首页进行刷新，然后观察控制台：  通过上图我们可以确认以下三点： * [ ] 在设置模块的imports时,angular针对引入的`模块类`进行了实例化，也就是说angular最终获取的依据该模块获取的`模块对象`。 * [ ] angular获取模块间的依赖时，会逐级进行查找。比如App模块依赖于Klass模块，Klass模块依赖于Test模块。那么此时对于App模块而言，它同时依赖于Klass模块及Test模块。 * [ ] 在获取`模块类`时，获取依赖的顺序是由上到下，但实例化的过程却是**由下到上**，即：先实例化的最后依赖的Test模块，后实例化的Klass模块。 ## 结论 通地Klass模块引用Test模块的测试，我们可以确认在Klass模块中的如下方法，在程序进行初化的时候就已经被触发了： klass/klass.module.ts ``` /** * 班级模块 */ @NgModule({ declarations: [IndexComponent, AddComponent, EditComponent], imports: [ CommonModule, FormsModule, ReactiveFormsModule, RouterModule.forChild(routes), ➊ TestModule ], exports: [ RouterModule ] }) export class KlassModule { ``` ➊ 同TestModule一样，RouterModule.forChild(routes)在App模块启动时被触发，而此时的路由环境为app-routing.module.ts，所以RouterModule.forChild(routes)相当于在根路由的基础上注册了`''`、`add`、`edit/:id`路由，进行造成在首页出现班级管理的现象。而当用户点击班级管理，触发`klass`路由时系统进行了惰性加载班级路由，此时则又将klass模块中的路由信息在当前`klass`路由的基础上又注册了一遍，这也就是为什么我们合适`klass`也可以正确访问的原因。  如上所示：在首页中进行了两个模块的实例化，当点击班级管理时，两个模块又实例化了一次。第一次实例化是由于在App模块中imports了Klass模块；第二次实例化则是由于惰性加载的原因，当访问`klass`路径时进行了班级模块的加载。 ## 修正问题 最后，让我们删除App模块中对Klass模块冗余的imports，并删除刚刚新建的klass.module.ts并对应恢复相关代码。 app.module.ts ``` imports: [ BrowserModule, HttpClientModule, FormsModule, AppRoutingModule, ], ```  # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.8](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.8) | - | | NgModules | [https://www.angular.cn/guide/ngmodules#ngmodules](https://www.angular.cn/guide/ngmodules#ngmodules) | 10 | | imports | [https://www.angular.cn/api/core/NgModule#imports](https://www.angular.cn/api/core/NgModule#imports) | 10 |