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) | - |