本節我們將班級選擇組件應用到班級添加組件中。 **同一模塊**下，一個組件引用另一個組件的方法非常簡單，我們僅需要在當前組件的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) |