本节的最后，让我们完成前后台的对接及一些优化工作。 # 测试 由于前台的代码早已经准备好，所以我们在此直接来到测试环节。使用浏览器打开[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) | - |