久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

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