久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

本節(jié)我們將班級(jí)選擇組件應(yīng)用到班級(jí)添加組件中。 **同一模塊**下，一個(gè)組件引用另一個(gè)組件的方法非常簡(jiǎn)單，我們僅需要在當(dāng)前組件的V層加入被引組件selector即可，比如我們打開添加班級(jí)組件的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層中添加對(duì)應(yīng)的方法： ```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; + } } ``` ### 測(cè)試 啟動(dòng)使用mock-api進(jìn)行的單元測(cè)試： ```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(); }); }); ``` 控制臺(tái)提示我們說(shuō)不認(rèn)識(shí)`<app-klass-select`  這是由于當(dāng)前所有的動(dòng)態(tài)測(cè)試模塊中并不存在selecor為`app-klass-select`的組件，將教師選擇組件添加到當(dāng)前動(dòng)態(tài)測(cè)試模塊中即可： ```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], ``` 再測(cè)試時(shí)顯示找不到NgControl，這是由于我們沒有引用響應(yīng)式表單模塊，所以當(dāng)前模塊不認(rèn)識(shí)教師選擇組件中的`formControl`造成的。  引入響應(yīng)式表單模塊： ```typescript - imports: [HttpClientModule, FormsModule], + imports: [HttpClientModule, FormsModule, ReactiveFormsModule], ``` 最終效果：  點(diǎn)擊一下試試吧。最后，我們刪除原來(lái)V層中最后的那個(gè)班主任： ```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"> 必須指定一個(gè)班主任 ``` 測(cè)試:  ## 小結(jié) 本節(jié)中我們將教師選擇組件成功的應(yīng)用到班級(jí)添加組件中，在模塊化的道路上更近了一步。 ## 本節(jié)作業(yè) 移除`fit`修正測(cè)試中發(fā)生的錯(cuò)誤。 如果你靠自己的能力解決完了，相信你現(xiàn)在已經(jīng)感受到了組件嵌套測(cè)試的**麻煩**，我想這也是Angular在國(guó)內(nèi)使用較少的原因之一。但要相信，做為一個(gè)優(yōu)秀的框架一定是盡善盡美的。在后面的章節(jié)中，我們將啟用新的設(shè)計(jì)模式來(lái)徹底的解決掉這種**麻煩**。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.2.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.2.4.zip) |