本節的最后，讓我們完成前后臺的對接及一些優化工作。 # 測試 由于前臺的代碼早已經準備好，所以我們在此直接來到測試環節。使用瀏覽器打開[http://localhost:4200/add](http://localhost:4200/add)并打控制臺。然后添加一些測試信息后點擊提交按鈕。  功能實現了，但效果好像LOW了一些，出錯的處理我們暫且不提。保存成功后，還需要刷新還能看到新增的數據，這點好像我們無法接受。下面，我們來實現在`TeacherAddComponent`完成`AppComponent`的重新加載功能。 # 先Thinking再Coding ## Thinking 當然界面的組成結構如下：  紅色的App父組件中有個藍色的routerOutlet子組件，藍色的routerOutlet父組件中有個TeacherAdd子組件。 讓我們回想一下代碼： ```html <router-outlet></router-outlet> ? <table> ? <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>郵箱</th> <th>性別</th> <th>注冊時間</th> <th>操作</th> </tr> <tr *ngFor="let teacher of teachers" > <td>{{teacher.id}}</td> <td>{{teacher.name}}</td> <td>{{teacher.username}}</td> <td>{{teacher.email}}</td> <td> <span *ngIf="teacher.sex">女</span> <span *ngIf="!teacher.sex">男</span> </td> <td>{{teacher.createTime | date: 'yyyy-MM-dd'}}</td> <td>刪除</td> </tr> </table> ``` * ? 當前routerOutlet組件裝載的是TeacherAdd組件 * ? App組件 這說明：在當前架構下，只在存在`TeacherAdd`組件就必然存在唯一的`App`組件；`App`組件初始化數據在是`ngOnInit`中，而`ngOnInit`是個公共方法，既然是公共的則說明可以由外部調用。 所以：我們猜測以下代碼應該是成立的。 ## Coding TeacherAddComponent ``` constructor(private httpClient: HttpClient, private appComponent: AppComponent ?) { } ... this.httpClient.post(url, teacher) .subscribe(() => { console.log('添加成功'); this.appComponent.ngOnInit(); ? }, (response) => { console.error('請求發生錯誤', response); }); ``` * ? 直接在構造函數中注入`AppComponent`。 * ? 當添加成功后，再次調用`App`組件的`ngOnInit()`方法，重新請求后臺數據。 ## 測試  **小bug：** 添加的性別與顯示的性別不相符，自己改改吧。 # 本節小測 我們剛剛直接在`TeacherAdd`組件中注入了`App`組件，同理：是否可以在`App`組件中注入`TeacherAdd`組件呢？ 請給出你猜測的答案并且用代碼來驗證自己猜測正確與否。 ## 上節答案 1. `spring`有對應的注解，分別為`DeleteMapping`、`PutMapping`、`PatchMapping`。 2. 在本節的代碼那個字符串為什么不能這樣寫： ```sql "insert into `teacher` (`name`, `username`, `email`, `sex`) values ('%s', '%s', '%s', '%s')" ``` 上述代碼格式用字符填充后，將變成： ```sql "insert into `teacher` (`name`, `username`, `email`, `sex`) values ('張三', 'zhangsan', 'zhangsan@yunzhiclub.com', 'true')" ``` 而`sex`字段類型是`boolean`，接收的值應該為`true`或`false`。但`'true'`的類型是字符串，并不是`boolean`。所以會發生sql錯誤。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 組件之間的交互 | [https://www.angular.cn/guide/component-interaction](https://www.angular.cn/guide/component-interaction) | 30 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.5](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.5) | - | ***** ## 本節答案 直接在`TeacherAdd`組件中注入了`App`組件的前提是：`TeacherAdd`組件是依賴于`App`組件的，存在`TeacherAdd`組件則必存在`App`組件。但反過來，有`App`組件卻不見得有`TeacherAdd`組件，所以我們猜測：如果在`App`組件中注入`TeacherAdd`組件是應該報錯的。 測試代碼： AppComponent ```js constructor(private httpClient: HttpClient, private teacherAddComponent: TeacherAddComponent) { } ``` 查看控制臺： ``` AppComponent_Host.ngfactory.js? [sm]:1 ERROR NullInjectorError ?: StaticInjectorError ? (AppModule)[AppComponent -> TeacherAddComponent ?]: StaticInjectorError(Platform: core)[AppComponent -> TeacherAddComponent]: NullInjectorError: No provider for TeacherAddComponent! ? ``` * ? Null注入器錯誤 * ? 靜態注入器錯誤 * ? 在向`AppComponent`注入`TeacherAddComponent`發生錯誤 * ? 沒有`TeacherAddComponent`的提供者 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.5](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.5) | - |