實際的項目中，很少只有一個模塊的。我們當前的學習項目后期也要添加班級管理、學生管理、課程管理等其它的模塊。那么當前的我們使用[http://localhost:4200/](http://localhost:4200/)來訪問教師列表便顯得不合適了。我們希望的是得到如下鏈接： | 地址 | 功能描述 | | ---- | ---- | | <空> | 首頁，提供頁面導航功能及歡迎信息 | | `teacher` | 教師列表 | | `teacher/add` | 添加新教師 | | `teacher/edit/<id>` | 編輯教師 | | `klass` | 班級列表 | | `klass/add` | 添加班級 | | `klass/edit/<id>` | 編輯班級 | 按照上述設計，重新對路由進行規劃，如下： app-routing.module.ts ``` const routes: Routes = [ { path: 'teacher', component: TeacherIndexComponent }, { path: 'teacher/add', component: TeacherAddComponent }, { path: 'teacher/edit/:id', component: TeacherEditComponent } ]; ``` 同時，我們為首頁增加一個教師管理的快捷方式： app.component.html ``` <h2>歡迎使用河北工業大學教務管理系統</h2> <ul> <li><a routerLink="">首頁</a></li> <li><a routerLink="teacher">教師管理</a></li> </ul> <router-outlet></router-outlet> ``` # 測試  通過測試我們發現如下`bug`: * [ ] 點擊編輯按鈕控制臺報錯。 * [ ] 新增完成后跳轉到了首頁，而非教師列表頁。 ## Cannot match any routes. 點擊編輯按鈕后，顯示了`Cannot match any routes. URL Segment: 'edit/3'`錯誤，提示未能成功匹配路由。的確如此，我們更新路由，原來的`edit/3`已完變更為`teacher/edit/3`了。但問題是：為什么`新增`按鈕是有效的，而沒有提示不能匹配`add`呢？我們把兩外的代碼比較一下： teacher-index.component.html ```html <a routerLink="./add">新增</a> <td><a [routerLink]="['/edit', teacher.id]">編輯</a> ``` 通過比較代碼，我們猜測問題可能出現在兩點上： * 使用`routeLink`的不報錯而使用了`[routerLink]`則會報錯。 * 使用`"./add"`不報錯而使用`'/edit'`報錯。 有了猜測的方向后開始進行嘗試： 驗證猜測一： ``` <a [routerLink]="['./add']">新增</a> <td><a [routerLink]="['/edit', teacher.id]">編輯</a> ``` 測試后我們發現新增仍然生效，而編輯則仍然報錯。得出結論：猜測一錯誤。 驗證猜測二： ``` <a [routerLink]="['./add']">新增</a> <td><a [routerLink]="['./edit?', teacher.id]">編輯</a> ``` * ? 由原`/edit`變為`./edit`。 保存代碼后進行測試，編輯按鈕正常。結論：猜測二正確。 ## 絕對地址與相對地址 以前我們學習過：相對地址是相對于當前路徑的，而絕對地址則是相對于根路徑的。在`angular`中略有不同，由于`angular`使用的`路由`機制，所以在`angular`中，相對地址是相對于當前`路由`的，而絕對地址則是相對于`根路由`的。在我們的當前的項目中，由于`根路由`為空所以才**看似**是相對于`根路徑`的。 我們知道`/edit`為絕對地址(路由)，而`./edit`為相對地址(路由)。 所以當`routeLink`設置為`/edit`時，`angular`會嘗試找`path`為`edit`的路由，該路由不存在所以控制臺報錯。而當`routeLink`設置為`./edit`時，表示相對于當前路由，此時當前路由`pah` = `teacher`，所以`angular`會嘗試找中徑對應`teacher/edit`的路由，進而進行了成功的跳轉。 ## C層中的導航 按剛剛學習的理論，我們打開教師新增組件的C層中的跳轉代碼: teacher-add.component.ts ``` this.router.navigate(['./']); ``` 我們發現：我們在參數中維護為`./`而非`/`，如果`./`代表相對路由，則跳轉的地址應該是自己(`./ 當前地址`)，但為何新增完成了跳轉到了首頁，而非我們所期望的列表頁呢？這是由于`router.navigate`方法默認跳轉的就是絕對路徑，如果想讓其跳轉到相對路徑，需要這樣使用： ``` constructor(private httpClient: HttpClient, private appComponent: AppComponent, private router: Router, ? private route: ActivatedRoute ?) { } ... this.router.navigate(['./'], {relativeTo: this.route}); ? ``` * ? Router：路由者，提供路由功能；ActivatedRoute：被激活的路由，提供路由狀態。 * ? `navigate(array, {})`，接收的第二個參數為對象，對象中的屬性`relativeTo`規定了跳轉的相對路由。 此時，我們完成添加后點擊保存就不會跳轉到首頁了，我們的目標是讓其跳轉到教師列表，則需要修正為： ``` this.router.navigate(['./../'?], {relativeTo: this.route}); ``` * ? `./`當前路徑 `../`上級路徑，`./../`當前路徑的上級路徑。當前路徑為`teacher/add`時，當前路徑的上級路徑為`teacher`。 * # 本節小測 按上述理論**自行完成編輯組件的路由跳轉修改** # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 相對導航 | [https://www.angular.cn/guide/router#relative-navigation](https://www.angular.cn/guide/router#relative-navigation) | 5 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.6.3](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.6.3) | - |