更新操作實質上是由獲取要新的數據以及更新數據兩部分組成的，在組件初始化后根據路由的ID值由后臺獲取要更新的學生信息，并將其顯示出來；待用戶修改完要更新的學生信息后，再把預更新的學生信息發送給后臺，從而完成學生的更新操作。 ## 獲取學生 在由后臺獲取學生前，需要先需要路由來獲取學生ID： ```typescript +++ b/first-app/src/app/student/edit/edit.component.ts @@ -2,6 +2,9 @@ import {Component, OnInit} from '@angular/core'; import {FormControl, FormGroup, Validators} from '@angular/forms'; import {YzValidators} from '../../yz-validators'; import {YzAsyncValidators} from '../../yz-async-validators'; +import {ActivatedRoute} from '@angular/router'; +import {StudentService} from '../../service/student.service'; +import {Assert} from '@yunzhi/ng-mock-api'; @Component({ selector: 'app-edit', @@ -10,8 +13,11 @@ import {YzAsyncValidators} from '../../yz-async-validators'; }) export class EditComponent implements OnInit { formGroup: FormGroup; + id: number | undefined; - constructor(private yzAsyncValidators: YzAsyncValidators) { + constructor(private yzAsyncValidators: YzAsyncValidators, + private activatedRoute: ActivatedRoute, + private studentService: StudentService) { this.formGroup = new FormGroup({ name: new FormControl('', Validators.required), number: new FormControl('', Validators.required, yzAsyncValidators.numberNotExist()), @@ -22,8 +28,31 @@ export class EditComponent implements OnInit { } ngOnInit(): void { + this.id = +this.activatedRoute.snapshot.params.id; + Assert.isNumber(this.id, '接收到的id類型不正確'); + this.loadData(this.id); + }); } + onSubmit(): void { } + + /** + * 根據ID加載學生信息 + * @param id 學生ID + */ + loadData(id: number): void { + this.studentService.getById(id) + .subscribe(student => { + this.formGroup.setValue({ + name: student.name, + number: student.number, + phone: student.phone, + email: student.email, + clazzId: student.clazz.id + }); + }); + } } ``` 上述代碼我們通過獲取`ActivatedRoute`上的`snapshot.params.id`來獲取對應的路由參數。由于當前組件注入了`ActivatedRoute`，所以在執行單元測試時將得到一個注入錯誤：  ## Providers 歷史上我們采用引入`RouterTestingModule` 的方式來解決此錯誤，由于`RouterTestingModule`擁有提供`ActivatedRoute`的能力，所以當我們當其引用時當前動態測試模塊便擁有了提供`ActivatedRoute`的能力，進而錯誤消失。 在此我們通過一種自定義`ActivatedRoute`提供者（provider）的方法來完成組件中`ActivatedRoute`的注入。自定義`ActivatedRoute`可以使我們在單元測試更加輕松的對`ActivatedRoute`進行模擬，從而達到在單元測試中快速模擬路由的作用。 在7.3.1小節中我們已經初步學習了如何使用`providers`來提供相關能力。結合前面我們學習過的公有與私有的概念，一個Angular的模塊在可見性上大體上應該是這樣的：  總結如下： 1. 模塊由組件、指令、管道及服務四大部分組成。 2. 組件、指令、管道默認為私有，通過`declarations`來聲明。 3. 服務默認為公有，通過`providers`來聲明。 4. 模塊間的引用通過`imports`來聲明。 5. 引用某個模塊則相當于擁有了該模塊聲明為公有的資源（組件、指令、管道和服務）。 6. 當前模塊將引用的資源默認為設置私有。 7. `exports`關鍵字的作用即是將私有的資源設置為公有，無論該資源是當前模塊自己擁有的還是當前模塊由其它模塊引入進來的。 在擁有的能力上，則是這樣的：  ### 沖突 有時候多個模塊可能會提供相同的能力，比如`RouterModule`與`RouterTestingModule`均有提供`ActivatedRoute`的能力，那么當我們引兩個模塊則會發生提供能力的沖突： ```typescript +++ b/first-app/src/app/student/edit/edit.component.spec.ts @@ -3,6 +3,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {EditComponent} from './edit.component'; import {MockApiTestingModule} from '../../mock-api/mock-api-testing.module'; import {getTestScheduler} from 'jasmine-marbles'; +import {RouterTestingModule} from '@angular/router/testing'; +import {RouterModule} from '@angular/router'; describe('EditComponent', () => { let component: EditComponent; @@ -10,7 +12,7 @@ describe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MockApiTestingModule], + imports: [MockApiTestingModule, RouterModule, RouterTestingModule], declarations: [EditComponent] }) ``` 如上我們引用兩個有提供`ActivatedRoute`的模塊，但單元測試并沒有報相關的**沖突**異常。這是因為當Angular在`imports`中檢測到某個能力有多個提供者時，將使用最后臺的提供者來替換前面的。 所以即使上述代碼在進行`imports` 時后出現的`RouterTestingModule`實際上起到了提供`ActivatedRoute`的作用。 ## provider 再觀察下圖不難發現，某個模塊的能力除了取決于`imports`外，還取決于其`providers`。  當在`imports`及`porviders`中提供的能力發生沖突時，`providers`將替換`imports`中的相應能力。所以我們還可以在`porviders`增加一個提供`ActivatedRoute`的能力： ```typescript +++ b/first-app/src/app/student/edit/edit.component.spec.ts @@ -4,7 +4,7 @@ import {EditComponent} from './edit.component'; import {MockApiTestingModule} from '../../mock-api/mock-api-testing.module'; import {getTestScheduler} from 'jasmine-marbles'; import {RouterTestingModule} from '@angular/router/testing'; -import {RouterModule} from '@angular/router'; +import {ActivatedRoute, RouterModule} from '@angular/router'; describe('EditComponent', () => { let component: EditComponent; @@ -12,8 +12,11 @@ describe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MockApiTestingModule, RouterTestingModule, RouterModule], - declarations: [EditComponent] + imports: [MockApiTestingModule, RouterModule, RouterTestingModule], + declarations: [EditComponent], + providers: [ + {provide: ActivatedRoute, useValue: {id: 'yunzhi'}} + ] }) .compileComponents(); }); ``` 然后我們當試在編輯組件中打印注入的`ActivatedRoute`: ```typescript +++ b/first-app/src/app/student/edit/edit.component.ts @@ -18,6 +18,7 @@ export class EditComponent implements OnInit { constructor(private yzAsyncValidators: YzAsyncValidators, private activatedRoute: ActivatedRoute, private studentService: StudentService) { + console.log(this.activatedRoute); this.formGroup = new FormGroup({ name: new FormControl('', Validators.required), number: new FormControl('', Validators.required, yzAsyncValidators.numberNotExist()), ``` 控制臺打印信息如下：  總結如下： 1. 可使用`imports`及`porviders`的方式來聲明模塊擁有的能力。 2. 當多個模塊的提供的能力沖突時，以最后提供的那個為準。 3. 當`imports`及`providers`提供的能力沖突時，以`providers`提供的能力為準。 下面我們開始利用這個特性，來模擬提供路由上的`snapshot`對象。 ## 單元測試 當前單元測試尚存在兩個異常：  兩個異常發生的原因均是未引入相關模塊： ```typescript +++ b/first-app/src/app/student/edit/edit.component.spec.ts @@ -5,6 +5,8 @@ import {MockApiTestingModule} from '../../mock-api/mock-api-testing.module'; import {getTestScheduler} from 'jasmine-marbles'; import {RouterTestingModule} from '@angular/router/testing'; import {ActivatedRoute, RouterModule} from '@angular/router'; +import {ClazzSelectModule} from '../../clazz/clazz-select/clazz-select.module'; +import {ReactiveFormsModule} from '@angular/forms'; describe('EditComponent', () => { let component: EditComponent; @@ -12,7 +14,8 @@ describe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MockApiTestingModule, RouterModule, RouterTestingModule], + imports: [MockApiTestingModule, RouterModule, RouterTestingModule, + ClazzSelectModule, ReactiveFormsModule], declarations: [EditComponent], providers: [ {provide: ActivatedRoute, useValue: {id: 'yunzhi'}} ``` 再次進行單元測試，將出現如下錯誤：  這是由于我們使用了`{id: 'yunzhi'}`這個對象來提供了`ActivedRoute`，該對象上并不存在`snapshot`屬性，所以才引發了上述異常。解決的方法很簡單： ```typescript +++ b/first-app/src/app/student/edit/edit.component.spec.ts @@ -18,7 +18,7 @@ describe('EditComponent', () => { ClazzSelectModule, ReactiveFormsModule], declarations: [EditComponent], providers: [ - {provide: ActivatedRoute, useValue: {id: 'yunzhi'}} + {provide: ActivatedRoute, useValue: {snapshot: {params: {id: '123'}}}} ] }) .compileComponents(); ``` 注意：雖然我們可以使用任何值來提供`ActivatedRoute`，但卻應該按鈕實際情況提供與原`ActivatedRoute`貼近的值。比如當前的實際情況是我們在組件中使用了`ActivatedRoute`的`snapshot.params.id`屬性，該屬性的類型實際上應該為`string`，所以我們在此自定義提供`ActivatedRoute`的對象時，也應該將其類型設置為`string`。 如果我們不這么做，便會導致單元測試環境與最終的集成測試環境變量類型不同，這也就失去了單元測試作為保障功能的目的。 此時在組件中調用`this.activatedRoute.snapshot.params.id;`將獲取到在單元測試中設定的值`123`:  單元測試正常，組件成功顯示：  當前組件有兩個比較明顯的異常（不正常）。第1個是手機號的格式不正確，第二是沒有自動選中要編輯的班級。 ### 手機號錯誤 手機號錯誤是由于我們在MockApi的返回值不小心將手機號的位數搞錯了，本來應該是11位，我們弄成12位了。修正如下： ```typescript +++ b/first-app/src/app/mock-api/student.mock.api.ts @@ -87,7 +87,7 @@ export class StudentMockApi implements MockApiInterface { id, name: randomString('姓名'), number: randomString('學號'), - phone: (139000000000 + randomNumber(99999999)).toString(), + phone: (139 * 10000 * 10000 + randomNumber(99999999)).toString(), email: randomString('前綴') + '@yunzhi.club', clazz: { id: randomNumber(), ``` 使用與兩個1000相乘的方法來替換原來在后面加0的情況。 ### 自動選中班級 班級未自動選中，也是由于MockApi在返回學生所在的班級ID時，使用了隨機字符串的方式。我們將其限定在0-10之間（班級選擇組件的ID范圍是0-10），這樣便可以自動選中了。 ```typescript +++ b/first-app/src/app/mock-api/student.mock.api.ts @@ -87,7 +87,7 @@ export class StudentMockApi implements MockApiInterface { id, name: randomString('姓名'), number: randomString('學號'), - phone: (139000000000 + randomNumber(99999999)).toString(), + phone: (139 * 10000 * 10000 + randomNumber(99999999)).toString(), email: randomString('前綴') + '@yunzhi.club', clazz: { id: randomNumber(), ``` 最終效果如下：  ### 本節作業 除使用`useValue`來直接聲明提供的對象外，我們在前面還使用了`useClass`的方式。請嘗試使用該方法來提供`ActivatedRoute` 并完成單元測試。 ## 資源鏈接 | 鏈接 | 名稱 | | ------------------------------------------------------------ | -------- | | [https://github.com/mengyunzhi/angular11-guild/archive/step7.7.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.7.2.zip) | 本節源碼 | | [https://angular.cn/guide/dependency-injection-providers](https://angular.cn/guide/dependency-injection-providers) | DI提供者 |