按照MVC的開發理論，在C層與V層的分工中，應該這樣：① C層來確定V層顯示什么樣的數據；②V層決定顯示數據的格式（樣式）。也就是說：像`系統的名稱`是什么，除了首頁外還有幾個菜單項，這些都應該是C層來負責的。 ## 分層 按上述的理論，我們將V層本應該存在于C層的信息遷移過來。 ### C層 nav/nav.component.ts ``` export class NavComponent implements OnInit { /*標題*/ title: string; ① /*菜單項*/ menus = new Array<{ url: string; name: string }?>(); ② constructor() { } ngOnInit() { this.title = '教務管理系統'; ③ this.menus.push({url: 'teacher', name: '教師管理'}); ③ this.menus.push({url: 'klass', name: '班級管理'}); ③ } } ``` * ? Array是一個容器，在進行初始化時，我們需要為其定義類型。在定義類型時，可以使用`對象`聲明的方法來替待使用`類`進行聲明的方式。 ### V層 nav/nav.component.html ``` <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" routerLink="">{{title}}①</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" routerLink="">首頁 <span class="sr-only">(current)</span></a> </li> <li class="nav-item" *ngFor="let menu of menus"②> <a class="nav-link" routerLink="{{menu.url}}③">{{menu.name}}④</a> </li> </ul> </div> </nav> ``` #### 測試 對nav組件進行測試 ``` Failed: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. (" ``` 提示沒有找到routerLink屬性，則加入路由模塊來修正此問題。 nav/nav.component.spec.ts ``` TestBed.configureTestingModule({ declarations: [NavComponent], imports: [RouterTestingModule] }) ``` 測試通過 ## 集成測試 最后使用`ng serve`來啟動項目，并查看其在系統中的表現效果。  我們發現有個小的問題：無論當前是哪個功能界面，被點亮的永遠是`首頁`。這是由于在以下樣式決定的： nav/nav.component.html ``` <li class="nav-item active①"> <a class="nav-link" routerLink="">首頁 <span class="sr-only">(current)</span></a> </li> ``` * ① active樣式決定了其點亮的特定 ### RouterLinkActive angular為我們提供了RouterLinkActive來解決此問題，當以RouterLinkActive標識的鏈接被選中時，會自動將RouterLinkActive的值添加加宿主元素的樣式中，比如我們可以這樣用： ``` <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item" routerLinkActive="active"?> <a class="nav-link" routerLink="">首頁 <span class="sr-only">(current)</span></a> </li> <li class="nav-item" *ngFor="let menu of menus" routerLinkActive="active"?> <a class="nav-link" routerLink="{{menu.url}}">{{menu.name}}</a> </li> </ul> </div> ``` * ? 當宿主節點（元素）或宿主節點下的子節點中的路由被選中時，將active添加到宿主節點的class中。 #### 測試：  但當前我們選擇了班級管理，為什么首頁也被點亮了呢？這是因為班級管理的地址為`/klass`，而`/klass`是基于首頁的路由地址`<空>`的，所以此時的路由實際是：首頁`<空>`的子路由`klass`（想想我們配置路由的過程），所以此時班級管理及首頁都被點亮是正確的。如果我們并不想點亮父路由，則可以使用設置`routerLinkActiveOptions`來解決這個問題： ``` <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"?> <a class="nav-link" routerLink="">首頁 <span class="sr-only">(current)</span></a> </li> ``` * ? routerLinkActiveOptions = 路由鏈接激活選項, exact = 嚴格的、精確的 加入該選擇后，當點班級管理或是教師管理時，首頁就不會被點亮了。  ## 測試 最后在收尾前我們將所有的`f`由測試代碼中去除，并運行`ng test`看是否當前的開發對歷史功能造成了影響 。 ``` Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 11 of 14 SUCCESS (0 secs / 0.443 secs) Chrome 78.0.3904 (Mac OS X 10.13.6): Executed 14 of 14 SUCCESS (0.57 secs / 0.516 secs) TOTAL: 14 SUCCESS TOTAL: 14 SUCCESS ``` 未發生其它異常，放寬心的收工。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.2.3](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.2.3) | - | [https://angular.io/api/router/RouterLinkActive](https://angular.io/api/router/RouterLinkActive)