本节我们将班级选择组件应用到班级添加组件中。 **同一模块**下，一个组件引用另一个组件的方法非常简单，我们仅需要在当前组件的V层加入被引组件selector即可，比如我们打开添加班级组件的V层，添加如下代码： ```html +++ b/first-app/src/app/clazz/add/add.component.html @@ -10,6 +10,12 @@ </small> </div> </div> + <div class="mb-3 row"> + <label class="col-sm-2 col-form-label">班主任</label> + <div class="col-sm-10"> + <app-klass-select (beChange)="onTeacherChange($event)"></app-klass-select> + </div> + </div> <div class="mb-3 row"> <label for="teacher" class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> ``` 接着在C层中添加对应的方法： ```typescript +++ b/first-app/src/app/clazz/add/add.component.ts @@ -35,4 +35,8 @@ export class AddComponent implements OnInit { .subscribe(clazz => console.log('保存成功', clazz), error => console.log('保存失败', error)); } + + onTeacherChange(teacherId: number): void { + this.clazz.teacherId = teacherId; + } } ``` ### 测试 启动使用mock-api进行的单元测试： ```typescript +++ b/first-app/src/app/clazz/add/add.component.mock-api.spec.ts @@ -36,7 +36,7 @@ describe('clazz add with mockapi', () => { component.onSubmit(); }); - it('should create', () => { + fit('should create', () => { fixture.autoDetectChanges(); }); }); ``` 控制台提示我们说不认识`<app-klass-select`  这是由于当前所有的动态测试模块中并不存在selecor为`app-klass-select`的组件，将教师选择组件添加到当前动态测试模块中即可： ```typescript +++ b/first-app/src/app/clazz/add/add.component.mock-api.spec.ts +import {KlassSelectComponent} from '../klass-select/klass-select.component'; - declarations: [AddComponent], + declarations: [AddComponent, KlassSelectComponent], ``` 再测试时显示找不到NgControl，这是由于我们没有引用响应式表单模块，所以当前模块不认识教师选择组件中的`formControl`造成的。  引入响应式表单模块： ```typescript - imports: [HttpClientModule, FormsModule], + imports: [HttpClientModule, FormsModule, ReactiveFormsModule], ``` 最终效果：  点击一下试试吧。最后，我们删除原来V层中最后的那个班主任： ```html +++ b/first-app/src/app/clazz/add/add.component.html @@ -14,18 +14,6 @@ <label class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> <app-klass-select (beChange)="onTeacherChange($event)"></app-klass-select> - </div> - </div> - <div class="mb-3 row"> - <label for="teacher" class="col-sm-2 col-form-label">班主任</label> - <div class="col-sm-10"> - <select id="teacher" class="form-control" - name="teacher" - [(ngModel)]="clazz.teacherId"> - <option *ngFor="let teacher of teachers" [ngValue]="teacher.id"> - {{teacher.name}} - </option> - </select> <small class="text-danger" *ngIf="clazz.teacherId === null"> 必须指定一个班主任 ``` 测试:  ## 小结 本节中我们将教师选择组件成功的应用到班级添加组件中，在模块化的道路上更近了一步。 ## 本节作业 移除`fit`修正测试中发生的错误。 如果你靠自己的能力解决完了，相信你现在已经感受到了组件嵌套测试的**麻烦**，我想这也是Angular在国内使用较少的原因之一。但要相信，做为一个优秀的框架一定是尽善尽美的。在后面的章节中，我们将启用新的设计模式来彻底的解决掉这种**麻烦**。 | 名称 | 链接 | | -------- | ------------------------------------------------------------ | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.2.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.2.4.zip) |