上節的最后我們展現了一個相當low的測試，在進行用戶新增時不旦沒有任何提示，并且還需要我們手動的輸入鏈接來完成測試功能，這明顯是接受不了的。 # 添加新增按鈕 teacher/teacher-index.component.html ``` <router-outlet></router-outlet> <a routerLink="./add?">新增</a> ? <table> ``` * ? 注意：此處我們使用的為`./add`，而不是`/add`。 # 添加跳轉 teacher/teacher-add.component.ts ``` constructor(private httpClient: HttpClient, private appComponent: AppComponent, private router: Router ?) { } this.httpClient.post(url, teacher) .subscribe(() => { console.log('添加成功'); this.appComponent.ngOnInit(); this.router.navigate(['./']?); ? }, (response) => { console.error('請求發生錯誤', response); }); ``` * ? 此處我們使用的是`./`，而不是`/`。 # 去測試痕跡 在生產環境中，在V層中直接打印數據會嚴重影響用戶的體驗。 teacher-add.component.html ``` <pre>{{name}} {{username}} {{email}} {{sex}}</pre> ? ``` teacher-edit.component.html ``` <pre>{{teacher | json}}</pre> ? ``` # 定制報錯信息 當前代碼當http請求發生錯誤時，直接打印到了控制臺。這對于開發而言無所，但做為用戶就接受不了了。我們在C層定義一個`message`，然后在V層來顯示它。 teacher-add.component.ts ```js export class TeacherAddComponent implements OnInit { name: string; username: string; email: string; sex: boolean; message = ''; ? ... /** * 顯示錯誤信息。1.5秒后關閉顯示 * @param message 錯誤信息 */ public showMessage(message = '發生錯誤' ?): void { this.message = message; setTimeout(() => { ? this.message = ''; }, 1500); } this.httpClient.post(url, teacher) .subscribe(() => { this.appComponent.ngOnInit(); this.router.navigate(['./']); }, (response) => { this.showMessage('請求發生錯誤'); ? console.error('請求發生錯誤', response); }); ``` * ? 為message設置默認值。 * ? setTimeout()是一個內置函數，它接收兩個參數： `function, number`，表示在`number`毫秒后執行`function`函數。 teacher-add.component.html ``` <h4 *ngIf="message">{{message}}</h4> ? <form id="teacherAddForm" (ngSubmit)="onSubmit()"> <div> ``` ** 請自行完成教師編輯的錯誤提示部分** ## 測試  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.6.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.6.2) | - |