前面的章節中，我們完成了教師的查看列表index、新增add以及編輯edit的功能。本節中，我們在教師列表中增加`編輯`按鈕，用戶點擊該按鈕后跳轉到編輯界面，完成更新后再跳轉回教師列表界面；增加`新增`按鈕，點擊后跳轉至新增界面，完成新增后然后再回跳到列表界面。 **angular官方中文網把這種跳轉功能稱為`路由器鏈接`，對應的英文關鍵字為`router-links`，表示鏈接到某個路由。** # 編輯按鈕 app.component.html ```html <td>刪除</td> ? <td><a routerLink="/edit/{{teacher.id}}">編輯</a> &nbsp;&nbsp;刪除</td> ? ? ``` * ? 使用routeLink來聲明a標簽跳轉的地址，使用`{{teacher.id}}`來填充該teacher對象對應的id值 或者我們也可以這樣使用： ```html <td><a [routerLink]="['/edit', teacher.id]">編輯</a> &nbsp;&nbsp;刪除</td> ? ``` * ? 使用`[routerLink]`來替換`routerLink`，接收的值的類型為字符串，該字符串中標記了一個數組，數組的第一項為路由地址，第二項為路由參數。 > 在實際的項目中，當第一種方法無法滿足我們的需求時，我們采用第二種方法。 ## 完成編輯后回跳 teacher-edit.component.ts ```js import {ActivatedRoute, Router} from '@angular/router'; constructor(private route: ActivatedRoute, private httpClient: HttpClient, private appComponent: AppComponent, private router: Router ①) { } /** * 提交表單 */ onSubmit(): void { this.httpClient.put(this.getUrl(), this.teacher) .subscribe(() => { console.log('更新成功'); this.appComponent.ngOnInit(); this.router.navigate(['/']); ? }, () => { console.error(`更新數據時發生錯誤,url:${this.getUrl()}`); }); } ``` * ① 引用Router。**注意：**前面我們引用的是`route 路由`，而現在我們引用的是`router 路由提供者`。 * ? 使用`router.navigate()`完成跳轉，該函數接收的參數類型為`數組`，在數組中第一項指跳轉的路由地址。 ## 測試  測試中我們發現雖然實現了由列表頁向編輯頁進行跳轉，編輯完成后也的確是跳轉回了首頁。但是如果我們在編輯的頁面中點擊編輯按鈕時，雖然URL如期發生了變化（說明路由器鏈接是成功的），但編輯頁面的內容卻未發生任何變化。這明顯是一個BUG。 > 如果在軟件的測試過程中，你總能想出各種可能導致BUG的測試用例。這說明你足夠用心的同時天生就具備了軟件開發工程師的靈魂。 **為什么會這樣呢？**猜測原因的同時，我們增加些測試代碼： teacher-edit.component.ts ```js ngOnInit(): void { console.log('組件初始化'); ? this.httpClient.get(this.getUrl()) ``` * ? 當組件被初始化時，在控制臺打印信息。  通過測試我們猜測：在進行組件調用時，如果當前的界面存在此組件，則直接使用此組件而不在重新渲染。所以當在編輯界面中編輯其它的數據時，教師編輯組件中的`ngOnInit`方法沒有被重新調用，導致了編輯界面中的數據未發生任何變化。此時可能你想到了在數據添加的小節中，我們添加完數據后教師列表頁并沒有實時的更新，最后我們使用的方法是在教師新增組件中注入了教師列表組件(AppComponent)，并手動的調用了教師列表組件的`ngOnInit`方法（在教師編輯界面我們也是這么處理的）。同時，前面我們還講過可以在子組件中直接注入父組件，因為子組件依賴于父組件，子組件存在時說明父組件必然存在；但無法在父組件中注入子組件，因為父組件存在時子組件不一定存在，這就決定了我們無法用“在App組件中調用TeacherEdit組件中的ngOnInit來強制子組件執行該方法（實際上即使可能這樣做，也是無濟無事的）”。 在下個小節中，我們將使用一種新的設計思想 -- **觀察者模式**來解決這個問題。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 路由器鏈接 | [https://www.angular.cn/guide/router#router-links](https://www.angular.cn/guide/router#router-links) | 2 | | 路由參數 | [https://www.angular.cn/guide/router#route-parameters](https://www.angular.cn/guide/router#route-parameters) | 5 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.6](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.6) | - |