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

本節(jié)我們展示如何在組件中獲取一個(gè)`YzAsyncValidators`實(shí)例。 ## 手動(dòng)構(gòu)建 `YzAsyncValidators`的構(gòu)造函數(shù)中聲明了`HttpClient`，也就是構(gòu)造一個(gè)`YzAsyncValidators`實(shí)例的前提是需要一個(gè)`HttpClient`實(shí)例。 ```typescript /** * 異步驗(yàn)證器. */ export class YzAsyncValidators { constructor(private httpClient: HttpClient) { } ``` 在學(xué)生添加組件中，可以采取自動(dòng)注入的方式，輕構(gòu)的獲取到一個(gè)`HttpClient`實(shí)例： ```typescript +++ b/first-app/src/app/student/add/add.component.ts - constructor() { + constructor(private httpClient: HttpClient) { ``` 然后就可以使用這個(gè)`HttpClient`實(shí)例來(lái)構(gòu)造一個(gè)`YzAsyncValidators`實(shí)例了： ```typescript constructor(private httpClient: HttpClient) { - const yzAsyncValidators = null as unknown as YzAsyncValidators; + const yzAsyncValidators = new YzAsyncValidators(httpClient); this.formGroup = new FormGroup({ ``` 執(zhí)行學(xué)生新增組件的單元測(cè)試，錯(cuò)誤信息消失，當(dāng)輸入學(xué)號(hào)時(shí)，在控制臺(tái)中打印信息如下：  ## 完成功能 `YzAsyncValidators`有了`HttpClient`后，便可以向后臺(tái)發(fā)起請(qǐng)求，然后根據(jù)后臺(tái)的返回值情況來(lái)決定驗(yàn)證是否通過(guò)。 ```typescript +++ b/first-app/src/app/yz-async-validators.ts numberNotExist(): (control: AbstractControl) => Observable<ValidationErrors | null> { return (control: AbstractControl): Observable<ValidationErrors | null> => { - console.log(this.httpClient); - console.log('異步驗(yàn)證器被調(diào)用'); - return of(null) - .pipe(delay(1000), tap(data => console.log('驗(yàn)證器返回?cái)?shù)據(jù)', data))); + const httpParams = new HttpParams() + .append('number', control.value); ① + return this.httpClient.get<boolean>③('/student/numberIsExist', {params: httpParams}) ② + .pipe④(map⑤(exists => exists ? {numberExist: true} : null)⑥); }; } } ``` - ① 創(chuàng)建了請(qǐng)求參數(shù)，并將`number`加入請(qǐng)求參數(shù)中 - ② 發(fā)起了一個(gè)加入了請(qǐng)求參數(shù)的**預(yù)**請(qǐng)求，該**預(yù)**請(qǐng)求僅當(dāng)被訂閱時(shí)才會(huì)發(fā)起真正的請(qǐng)求，而`FormControl`的異步驗(yàn)證器會(huì)根據(jù)情況來(lái)決定是否進(jìn)行訂閱，從而控制是否向后臺(tái)發(fā)起請(qǐng)求。 - ③ 該預(yù)請(qǐng)求的返回值的類(lèi)型為`boolean`，這是由后面臺(tái)API返回類(lèi)型決定的。所以預(yù)請(qǐng)求的返回值類(lèi)型為`Observable<boolean>` - ④ `pipe`的作用是使數(shù)據(jù)依次通過(guò)各個(gè)管道（操作符）。 - ⑤ `map`操作符能起到數(shù)據(jù)轉(zhuǎn)換的作用。`boolean`類(lèi)型的值由管道這頭輸入，然后它按自己的規(guī)則決定管道那頭的輸出。 - ⑥ 當(dāng)前的轉(zhuǎn)換規(guī)則是：如果管道這頭接收的是`true`，則管道那頭輸出`{numberExist: true}`；如果管道這頭接收提`false`，則管道那頭輸出的是`null`。該規(guī)則將`boolean`類(lèi)型的值成功的轉(zhuǎn)換為了`ValidationErrors | null`。便得最終的返回值類(lèi)型由`Observable<boolean>`變更為` Observable<ValidationErrors | null>` 為了更好的理解`map`操作符，我們?cè)诋?dāng)前的學(xué)生增加組件的測(cè)試文件中增加一個(gè)測(cè)試方法： ```typescript +++ b/first-app/src/app/student/add/add.component.spec.ts fit('理解map操作符', () => { // 數(shù)據(jù)源發(fā)送數(shù)據(jù)1 const a = of(1) as Observable<number>; a.subscribe(data => console.log(data)); // 數(shù)據(jù)源還是發(fā)送數(shù)據(jù)1 const b = of(1) as Observable<number>; // 使用pipe，但不加任何管道 const c = b.pipe() as Observable<number>; c.subscribe(data => console.log(data)); // 接著發(fā)送數(shù)據(jù)源1，通過(guò)map操作符完成number到string的轉(zhuǎn)換 const d = of(1) as Observable<number>; const e = d.pipe(map(data => { console.log('map操作符接收到的值的類(lèi)型為：', typeof data); const result = data.toString(); console.log('map操作符轉(zhuǎn)換后的值的類(lèi)型為：', typeof result); return result; })) as Observable<string>; e.subscribe(data => console.log(data)); // 下面的寫(xiě)法與上面的效果一樣，當(dāng)箭頭函數(shù)中僅有一行代碼時(shí)，可以省略該代碼的return關(guān)鍵字 const f = of(1) as Observable<number>; const g = f.pipe(map(data => data.toString())) as Observable<string>; g.subscribe(data => console.log(data)); // 除進(jìn)行一般的類(lèi)型轉(zhuǎn)換外，還可以轉(zhuǎn)換為任意類(lèi)型 const h = of(1).pipe(map(data => { return {value: data}; })) as Observable<{ value: number }>; h.subscribe(data => console.log(data)); // 當(dāng)然也可以轉(zhuǎn)換為null類(lèi)型 const i = of(1).pipe(map(data => { if (data !== 1) { return {test: data}; } else { return null; } })) as Observable<{ value: number } | null>; i.subscribe(data => console.log(data)); }); ``` 測(cè)試結(jié)果如下：  ## 測(cè)試 接著回到學(xué)號(hào)的異步驗(yàn)證器的測(cè)試上來(lái)：當(dāng)輸入032282時(shí)錯(cuò)誤時(shí)顯示錯(cuò)誤提示。  當(dāng)輸入其它學(xué)號(hào)時(shí)，錯(cuò)誤提示消失：  上述測(cè)試足以說(shuō)明異步驗(yàn)證是有效的。 ## 完善提示信息 輸入032282的學(xué)號(hào)時(shí)，異步驗(yàn)證器返回了驗(yàn)證失效的信息，但提示信息卻為：學(xué)號(hào)不能為空。正確的信息應(yīng)該是：該學(xué)號(hào)已存在。 當(dāng)一個(gè)`FormControl`存在多個(gè)驗(yàn)證器時(shí)，當(dāng)驗(yàn)證不通過(guò)時(shí)可以通過(guò)`FormControl`的`errors`來(lái)定制驗(yàn)證信息： ```html +++ b/first-app/src/app/student/add/add.component.html @@ -11,7 +11,7 @@ <div class="mb-3 row"> <label class="col-sm-2 col-form-label">學(xué)號(hào)</label> <div class="col-sm-10"> - {{formGroup.get('number').pending}} + {{formGroup.get('number').errors | json}} <input type="text" class="form-control" formControlName="number"> <small class="text-danger" *ngIf="formGroup.get('number').invalid"> 學(xué)號(hào)不能為空 ``` 此時(shí)，當(dāng)學(xué)號(hào)為空時(shí)，顯示的提示信息如下：  當(dāng)學(xué)號(hào)為032282時(shí)，顯示的提示信息為：  如此以來(lái)，便可以利用`errors`如下定義提示信息了： ```html <small class="text-danger" *ngIf="formGroup.get('number').invalid"> - 學(xué)號(hào)不能為空 + <span *ngIf="formGroup.get('number').errors.required">學(xué)號(hào)不能為空</span> + <span *ngIf="formGroup.get('number').errors.numberExist">該學(xué)號(hào)已存在</span> </small> ``` 此時(shí)將輸入032282時(shí)，將提示**該學(xué)號(hào)已存在**。  提示信息解決后，還需要解決異步驗(yàn)證器在發(fā)起后臺(tái)請(qǐng)求時(shí)保存按鈕被點(diǎn)亮的BUG。解決該問(wèn)題可以利用`FormControl`的`pending`屬性： ```html <div class="col-sm-10 offset-2"> - <button class="btn btn-primary" [disabled]="formGroup.invalid">保存 + <button class="btn btn-primary" [disabled]="formGroup.invalid || formGroup.pending">保存 </button> </div> ``` 如此以來(lái)，當(dāng)異步驗(yàn)證器發(fā)起異步驗(yàn)證時(shí)`pending`的值為`true`，保存按鈕不可用；當(dāng)異步驗(yàn)證器完成異步驗(yàn)證時(shí)`pending`的值為`false`，此時(shí)保存按鈕是否可以則取決于`invalid`屬性。 ## 自動(dòng)構(gòu)建 完善完異步驗(yàn)證器后，讓我們把思緒拉回來(lái)在組件中構(gòu)造`YzAsyncValidators`實(shí)例上來(lái)。剛剛我們通過(guò)在組件中注入`HttpClient`，然后再構(gòu)建 `YzAsyncValidators`實(shí)例。 但隨著項(xiàng)目的更新，上述方法可能會(huì)引發(fā)比較嚴(yán)重的問(wèn)題。  1. 組件a、b、c、d、e全部依賴(lài)于`YzAsyncValidators`驗(yàn)證器。所以在組件a、b、c、d、e全部注入`HttpClient`實(shí)例，進(jìn)而使用`new `YzAsyncValidators(httpClient)`來(lái)獲取一個(gè)驗(yàn)證器實(shí)例。 2. 有一天`YzAsyncValidators`除依賴(lài)于`HttpClient`外，還依賴(lài)于`ActivedRouter`實(shí)例，構(gòu)造函數(shù)變更為：`constructor(private httpClient: HttpClient, private activedRouter: ActivedRouter) {`。 3. 這時(shí)候?yàn)?zāi)難便發(fā)生了，我們需要依次修改組件a、b、c、d、e，每個(gè)組件中都需要再注入個(gè)`ActivedRouter`實(shí)例。 這明顯是不可接受的，我們的理想目標(biāo)是當(dāng)`YzAsyncValidators`變更時(shí)，依賴(lài)于該`YzAsyncValidators`組件可以在不進(jìn)行任何變更的情況下繼續(xù)正常工作。 預(yù)解決這個(gè)問(wèn)題，便需要將手動(dòng)實(shí)例化`YzAsyncValidators`改為自動(dòng)注入了： ```typescript +++ b/first-app/src/app/student/add/add.component.ts @@ -12,8 +12,7 @@ import {HttpClient} from '@angular/common/http'; export class AddComponent implements OnInit { formGroup: FormGroup; - constructor(private httpClient: HttpClient) { - const yzAsyncValidators = new YzAsyncValidators(httpClient); + constructor(private httpClient: HttpClient, private yzAsyncValidators: YzAsyncValidators) { this.formGroup = new FormGroup({ name: new FormControl('', Validators.required), number: new FormControl('', Validators.required, yzAsyncValidators.numberNotExist()), ``` 此時(shí)當(dāng)前測(cè)試將發(fā)生一個(gè)錯(cuò)誤：  該錯(cuò)誤提示我們說(shuō)：沒(méi)有找到`YzAsyncValidators`的提供者。沒(méi)錯(cuò)，由于我們未對(duì)`YzAsyncValidators`類(lèi)進(jìn)行任何的配置，所以當(dāng)前動(dòng)態(tài)測(cè)試模塊中并沒(méi)有提供`YzAsyncValidators`的能力。這時(shí)候就需要復(fù)習(xí)一下6.7.2中的單例服務(wù)了：  上圖的`AuthService`只所以能夠被Angular注入到任意的模塊中，是由于`AuthService`并聲明在`root`模塊中。按上述思想，我們將`YzAsyncValidators`也聲明到`root`模塊中： ```typescript +++ b/first-app/src/app/yz-async-validators.ts @@ -2,10 +2,14 @@ import {AbstractControl, ValidationErrors} from '@angular/forms'; import {Observable, of} from 'rxjs'; import {delay, map, tap} from 'rxjs/operators'; import {HttpClient, HttpParams} from '@angular/common/http'; +import {Injectable} from '@angular/core'; /** * 異步驗(yàn)證器. */ +@Injectable({ + providedIn: 'root' +}) export class YzAsyncValidators { constructor(private httpClient: HttpClient) { ``` 此時(shí)Anguar便有了提供`YzAsyncValidators`的能力，單元測(cè)試中的錯(cuò)誤隨即消失，異步驗(yàn)證器工作正常。  此時(shí)，即使有一天我們變更`YzAsyncValidators`的依賴(lài)，依賴(lài)于該`YzAsyncValidators`組件也可以在不進(jìn)行任何變更的情況下繼續(xù)正常工作。 | 名稱(chēng) | 鏈接 | | --------------- | ------------------------------------------------------------ | | Angular依賴(lài)注入 | [https://angular.cn/guide/dependency-injection](https://angular.cn/guide/dependency-injection) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step7.2.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.2.4.zip) |