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

組件初始化后，單元測(cè)試如下：  錯(cuò)誤信息提示說(shuō)以`classId`命名的`FormControl`上沒(méi)有找到`value accessor`。如果以前報(bào)此類(lèi)錯(cuò)誤，我們有些茫然是正常的。但學(xué)習(xí)過(guò)自定義FormControl后，排醒此錯(cuò)誤便應(yīng)該有些眉目了。只所以發(fā)生上述錯(cuò)誤，是由于在V層中我們使用了如下代碼： ```html <app-clazz-select formControlName="clazzId"></app-clazz-select> ``` 上述錯(cuò)誤產(chǎn)生的根本原因是當(dāng)前動(dòng)態(tài)測(cè)試模塊并不認(rèn)識(shí)`app-clazz-select`，當(dāng)然就更不知道`app-clazz-select`是我們自定義的`FormControl`了。 ## import 我們按下圖嘗試修正出現(xiàn)的單元測(cè)試的錯(cuò)誤：  在動(dòng)態(tài)測(cè)試模塊中引入班級(jí)選擇模塊： ```typescript +++ b/first-app/src/app/student/add/add.component.spec.ts @@ -2,6 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AddComponent} from './add.component'; import {ReactiveFormsModule} from '@angular/forms'; +import {ClazzSelectModule} from '../../clazz/clazz-select/clazz-select.module'; describe('student -> AddComponent', () => { let component: AddComponent; @@ -11,7 +12,8 @@ describe('student -> AddComponent', () => { await TestBed.configureTestingModule({ declarations: [AddComponent], imports: [ - ReactiveFormsModule + ReactiveFormsModule, + ClazzSelectModule ] }) ``` `import`包括了`ClazzSelectComponent`組件的`ClazzSelectModule`后，錯(cuò)誤依舊：`app-clazz-select`仍然未被識(shí)別為`FormControl`。 一般這種情況是在創(chuàng)建自己定義組件時(shí)沒(méi)有完全符合以下兩種規(guī)范造成的： - 組件未實(shí)現(xiàn)`ControlValueAccessor`接口 - 組件未`provider` -> `NG_VALUE_ACCESSOR` 對(duì)于有單元測(cè)試的我們而言，上述兩種情況都不大可能，因?yàn)樵诎嗉?jí)選擇組件的單元測(cè)試中，我們?cè)诟附M件中對(duì)其進(jìn)行了測(cè)試： ```typescript first-app/src/app/clazz/clazz-select/clazz-select.component.spec.ts @Component({ template: ` <app-clazz-select [formControl]="clazzId"></app-clazz-select>` }) class TestComponent { clazzId = new FormControl(); } ``` 這說(shuō)明`app-clazz-select`必然是符合`FormControl`規(guī)范的。 ## 私有與公有 要解決這個(gè)問(wèn)題，就要談?wù)勀K中的組件、指令和管道的公有**與**私有**了。 默認(rèn)情況下處于模塊`declarations`聲明中的組件、指令和管道都是**私有**的，在當(dāng)前模塊的任意組件中可以自由地使用它們。而當(dāng)模塊（A）被`import`進(jìn)入其它模塊（B）時(shí)，由于A模塊中元素的**私有**性，B模塊無(wú)法使用A模塊中的任意私有元素（組件、指令和管道）。 所以在當(dāng)前的代碼下，進(jìn)行`imports`時(shí)，實(shí)際如下圖所示：  如上圖所示：私有的班級(jí)選擇組件并沒(méi)有成功的并引入到動(dòng)態(tài)測(cè)試模塊中來(lái)，所以動(dòng)態(tài)測(cè)試模塊并無(wú)法解析`app-clazz-select`，當(dāng)然就更別談將其做為`FormControl`來(lái)看待了。 ## exports 若想將Angular中的組件、指令和管道設(shè)置為公有的，則需要將其添加到`exports`中： ```typescript +++ b/first-app/src/app/clazz/clazz-select/clazz-select.module.ts @@ -9,6 +9,9 @@ import {ReactiveFormsModule} from '@angular/forms'; imports: [ CommonModule, ReactiveFormsModule + ], + exports: [ + ClazzSelectComponent ] }) export class ClazzSelectModule { ``` 此時(shí)`ClazzSelectComponent`的屬性變更為**公有**，當(dāng)動(dòng)態(tài)測(cè)試模塊引入班級(jí)選擇模塊時(shí)便開(kāi)始同步引入了這個(gè)班級(jí)選擇組件了。當(dāng)然也就認(rèn)識(shí)了`app-clazz-select`，以及感知到其是一個(gè)合格的`FormControl`了。  此時(shí)不能識(shí)別為`FormControl`的錯(cuò)誤消失，轉(zhuǎn)而顯示新的錯(cuò)誤如下：  加入MockApi后錯(cuò)誤消失： ```typescript +++ b/first-app/src/app/student/add/add.component.spec.ts @@ -3,6 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AddComponent} from './add.component'; import {ReactiveFormsModule} from '@angular/forms'; import {ClazzSelectModule} from '../../clazz/clazz-select/clazz-select.module'; +import {MockApiTestingModule} from '../../mock-api/mock-api-testing.module'; describe('student -> AddComponent', () => { let component: AddComponent; @@ -13,7 +14,8 @@ describe('student -> AddComponent', () => { declarations: [AddComponent], imports: [ ReactiveFormsModule, - ClazzSelectModule + ClazzSelectModule, + MockApiTestingModule ] }) .compileComponents(); ``` 最終效果如下：  最后，手動(dòng)的發(fā)送后面的模擬數(shù)據(jù)，并重新渲染V層，以使班級(jí)選擇組件中默認(rèn)有數(shù)據(jù)可選： ```typescript +++ b/first-app/src/app/student/add/add.component.spec.ts @@ -30,5 +30,7 @@ describe('student -> AddComponent', () => { fit('should create', () => { expect(component).toBeTruthy(); + getTestScheduler().flush(); + fixture.detectChanges(); }); }); ```  | 名稱(chēng) | 鏈接 | | ---------------- | ------------------------------------------------------------ | | `imports` 數(shù)組 | [https://angular.cn/guide/bootstrapping#the-imports-array](https://angular.cn/guide/bootstrapping#the-imports-array) | | `exports` | [https://angular.cn/api/core/NgModule#exports](https://angular.cn/api/core/NgModule#exports) | | 共享特性模塊 | [https://angular.cn/guide/sharing-ngmodules#sharing-modules](https://angular.cn/guide/sharing-ngmodules#sharing-modules) | | 本節(jié)源碼(含答案) | [https://github.com/mengyunzhi/angular11-guild/archive/step7.2.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.2.1.zip) |