本小節，讓我們完成klass模塊中組件間的對接工作，以及較驗前后臺的對接效果。 # 組件對接 ### 增加新增班級鏈接 klass/index/index.component.html ``` <a routerLink="./add">新增班級</a> ? <form (ngSubmit)="onQuery()"> ``` **注意：** 是`./add`而不能是`/add`。 #### 測試  ### 新建后跳轉到首頁 klass/add/add.component.ts ```js constructor(private httpClient: HttpClient, private router: Router, ① private route: ActivatedRoute ①) { } onSubmit(): void { const url = 'http://localhost:8080/Klass'; const klass = new Klass(undefined, this.name.value, new Teacher(parseInt(this.teacherId.value, 10), undefined, undefined) ); this.httpClient.post(url, klass) .subscribe(() => { console.log('保存成功'); this.router.navigate([''], {relativeTo: this.route}); ? }, (response) => { console.log(`向${url}發起的post請求發生錯誤` + response); this.setMessage(AddComponent.errorMessage); }); } ``` 我們重新啟動后臺，并進行前后臺對接測試：  由于前面在單元測試中我們已經下足了功夫，所以此次測試結果完美 ?? # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.7](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.3.7) | - | | 相對導航 | [https://www.angular.cn/guide/router#relative-navigation](https://www.angular.cn/guide/router#relative-navigation) | 5 |