NAV导航组件将贯穿于项目的始终，所以我们将其放到App根模块中。使用终端来到app根文件夹，并执行`ng g c nav`来创建该组件。 ## 初始化 ``` panjiedeMac-Pro:app panjie$ ng g c nav CREATE src/app/nav/nav.component.sass (0 bytes) CREATE src/app/nav/nav.component.html (18 bytes) CREATE src/app/nav/nav.component.spec.ts (607 bytes) CREATE src/app/nav/nav.component.ts (258 bytes) UPDATE src/app/app.module.ts (998 bytes) ``` ## 迁移 类似于这种将一些静态代码封装为组件的方法非常的简单，在初始化后我们只需要将原V层的代码直接迁移过去即可。也就是说，我们当前仅需打开app.component.html然后剪切导航部分的代码，直接粘贴到nav/nav.component.html中即可。复制完成后，我们在app.component.html中原代码的位置中加入导航组件的选择器。 nav/nav.component.html ``` <h2>欢迎使用河北工业大学教务管理系统</h2> <ul> <li><a routerLink="">首页</a></li> <li><a routerLink="teacher">教师管理</a></li> <li><a routerLink="klass">班级管理</a> </li> </ul> ``` app.component.html ``` <app-nav></app-nav> <router-outlet></router-outlet> ``` ### 测试 该测试应该分别两部分，分别为修改的App组件以及新增的NAV组件，在本小节中我们对APP组件进行测试，来到app.component.spec.ts，将对应的方法前加入`f` ，并启用`ng test`来查看运行结果。 ``` 'app-nav' is not a known element: 1. If 'app-nav' is an Angular component, then verify that it is part of this module. ``` 以前面的经验，在单元测试中声明该组件。 app.component.spec.ts ``` declarations: [ AppComponent, NavComponent ], ```  测试通过 # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.2.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.2.1) | - |