本節(jié)我們以教師選擇組件為例，展示如何自定義一個(gè)`FormControl`。
Angular內(nèi)置的`FormControl`僅支持綁定到原生的html表單項(xiàng)上，比如`input`、`select`等。對(duì)于一些自定義的組件，若想也像`input`一樣使用響應(yīng)式表單，則需要經(jīng)過(guò)兩步：
- 繼續(xù)相應(yīng)的接口，以使得當(dāng)前組件提供`FormControl`所需的一些方法。
- 將當(dāng)前組件聲明為響應(yīng)式表單項(xiàng)，以使響應(yīng)式表單能夠解析當(dāng)前組件對(duì)應(yīng)的`selector`。
## 測(cè)試
在寫(xiě)功能之前先寫(xiě)測(cè)試的模式被稱為`TDD`，全稱為：`Test-Driven Development`，即**測(cè)試驅(qū)動(dòng)開(kāi)發(fā)**，網(wǎng)上有很多關(guān)于`TDD`的討論，有興趣的同學(xué)可以搜索來(lái)加深下了解。在此我們嘗試使用`TDD`的模式來(lái)開(kāi)發(fā)當(dāng)前功能。為了規(guī)避一些其它的測(cè)試代碼帶來(lái)的問(wèn)題，最大限度的減少一些在學(xué)習(xí)初期不必要的**麻煩**，我們來(lái)到教師選擇組件所在文件夾中，新建一個(gè)測(cè)試文件`klass-select-form-control.component.spec.ts`，并初始化如下：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select-form-control.component.spec.ts
import {KlassSelectComponent} from './klass-select.component';
import {TestBed} from '@angular/core/testing';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing';
import {TeacherMockApi} from '../../mock-api/teacher.mock.api';
describe('KlassSelectComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [KlassSelectComponent],
imports: [
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
providers: [
{
provide: HTTP_INTERCEPTORS, multi: true,
useClass: MockApiTestingInterceptor.forRoot([
TeacherMockApi
])
}
]
})
.compileComponents();
});
fit('響應(yīng)式表單', () => {
});
});
```
本次測(cè)試的目的在于：當(dāng)前組件作用子組件使用時(shí)，是否支持響應(yīng)式表單的`FormConrol`。所以在測(cè)試過(guò)程中，我們需要來(lái)搭建當(dāng)前組件為子組件的測(cè)試環(huán)境。若要實(shí)現(xiàn)該功能，則需要建立一個(gè)父組件。而既然是測(cè)試，我們?cè)跍y(cè)試文件中來(lái)臨時(shí)搭建一個(gè)父組件好了：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select-form-control.component.spec.ts
@@ -1,9 +1,17 @@
import {KlassSelectComponent} from './klass-select.component';
import {TestBed} from '@angular/core/testing';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing';
import {TeacherMockApi} from '../../mock-api/teacher.mock.api';
+import {Component} from '@angular/core';
+
+@Component({
+ template: '<h1>Test:</h1><app-klass-select [formControl]="teacherIdFormControl"></app-klass-select>'
+})
+class TestComponent {
+ teacherIdFormControl = new FormControl();
+}
describe('KlassSelectComponent', () => {
beforeEach(async () => {
```
如上代碼便創(chuàng)建了一個(gè)包含有`app-klass-select`組件的父組件`TestComponent`。
在定義該組件時(shí)：
- 由于該組件并不會(huì)做為子組件使用，所以我們并沒(méi)有設(shè)置其`selector`；
- 由于該組件并不需要任何樣式，所以我們并沒(méi)有設(shè)置其`styleUrls`；
- 由于該組件的V層代碼非常的簡(jiǎn)單，所以我們移除了`templateUrl`，取而代之的是`template`，并直接在`template`書(shū)寫(xiě)了V層；
- 由于當(dāng)前組件僅在當(dāng)前文件中使用，所以我們移除了`export`關(guān)鍵字，在定義組件時(shí)，使用的是`class TestComponent`而非`export class TestComponent`;
- 由于當(dāng)前測(cè)試用組件并不需要進(jìn)行復(fù)雜初始化，所以刪除了對(duì)`OnInit`接口的實(shí)現(xiàn)。
沒(méi)錯(cuò)，這就是一個(gè)縮小版本的組件。雖然小，但功能正常。
### 將組件加入模塊
與其它被測(cè)試的模塊相同，要想被動(dòng)態(tài)測(cè)試模塊認(rèn)識(shí)，則需要將組件加入到動(dòng)態(tài)測(cè)試模塊中：
```typescript
describe('KlassSelectComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [KlassSelectComponent],
+ declarations: [KlassSelectComponent, TestComponent],
imports: [
HttpClientModule,
FormsModule,
```
### 創(chuàng)建組件
在單面的章節(jié)對(duì)動(dòng)態(tài)組件進(jìn)行分析時(shí)，我們已經(jīng)接觸過(guò)了`TestBed`是如何創(chuàng)建動(dòng)態(tài)測(cè)試模塊中的某個(gè)組件的。上于本次要?jiǎng)?chuàng)建的`TestComponent`在當(dāng)前單元測(cè)試文件中僅用一次，所以將創(chuàng)建該組件的過(guò)程直接寫(xiě)到測(cè)試用例的相關(guān)方法上：
```typescript
fit('響應(yīng)式表單', () => {
// 創(chuàng)建一個(gè)組件夾具（容器），這就像我們要測(cè)試顯卡是否正常功能時(shí)，需要有一臺(tái)供顯卡工作的電腦一樣。
// testFixture便是TestComponent這塊顯卡賴以工作的電腦
const fixture = TestBed.createComponent(TestComponent);
// 獲取testFixture這臺(tái)電腦上的testComponent顯卡
const component = fixture.componentInstance;
// 調(diào)用detectChanges()渲染V層，開(kāi)始渲染V層中的子組件。
// 由于當(dāng)前Test組件未請(qǐng)求后臺(tái)，所以省略了getTestScheduler().flush();
// 當(dāng)然了，寫(xiě)上也無(wú)防
fixture.detectChanges(); ??
// 模擬返回?cái)?shù)據(jù)后，進(jìn)行變更檢測(cè)重新渲染子組件V層
getTestScheduler().flush();
fixture.detectChanges();
});
```
這里的`fixture.detectChanges()`很重要，該方法的作用是渲染`Test`組件的V層，而子組件正是在渲染該V層時(shí)被Angular發(fā)現(xiàn)的。Angular發(fā)現(xiàn)子組件`app-klass-select `后，才開(kāi)始渲染`KlassSelectComponent`組件，即而發(fā)生數(shù)據(jù)請(qǐng)求。
終止`ng t`后重新啟動(dòng)一下`ng t`，效果如下：
此時(shí)單元測(cè)試報(bào)了`No value accessor`的異常，這是由于響應(yīng)式表單在處理`app-klass-select`上的`formControl`時(shí)要調(diào)用相關(guān)的`value accessor`（值處理器）。
## 實(shí)現(xiàn)接口
響應(yīng)式表單預(yù)調(diào)用了`value accessor`被規(guī)定于`@angular/forms`中的`ControlValueAccessor`接口中，教師選擇組件僅需要實(shí)現(xiàn)該接口，便可以借助IDE快速的填充上相關(guān)的方法：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select.component.ts
@@ -1,7 +1,7 @@
import {Component, OnInit, EventEmitter, Output, Input} from '@angular/core';
import {Teacher} from '../../entity/teacher';
import {HttpClient} from '@angular/common/http';
-import {FormControl} from '@angular/forms';
+import {ControlValueAccessor, FormControl} from '@angular/forms';
@Component({
@@ -9,7 +9,7 @@ import {FormControl} from '@angular/forms';
templateUrl: './klass-select.component.html',
styleUrls: ['./klass-select.component.css']
})
-export class KlassSelectComponent implements OnInit {
+export class KlassSelectComponent implements OnInit, ControlValueAccessor {
teachers = new Array<Teacher>();
teacherId = new FormControl();
```
此時(shí)我們把鼠標(biāo)移至KlassSelectComponent名稱上，按提示進(jìn)行點(diǎn)擊，便可快速的生成相關(guān)方法：
生成方法如下：
```typescript
@@ -25,6 +24,18 @@ export class KlassSelectComponent implements OnInit, ControlValueAccessor {
constructor(private httpClient: HttpClient) {
}
+ writeValue(obj: any): void {
+ throw new Error('Method not implemented.');
+ }
+
+ registerOnChange(fn: any): void {
+ throw new Error('Method not implemented.');
+ }
+
+ registerOnTouched(fn: any): void {
+ throw new Error('Method not implemented.');
+ }
+
ngOnInit(): void {
// 關(guān)注teacherId
this.teacherId.valueChanges
```
> ? 除上述三個(gè)方法外，ControValueAccessor中還存在一個(gè)可選的方法 [**setDisabledState**(isDisabled: boolean)?: void](https://angular.cn/api/forms/ControlValueAccessor#setDisabledState)用于設(shè)置組件的**disabled**狀態(tài)。
在此，我們僅需要`writeValue`及`registerOnChange`方法，兩個(gè)方法的作用如下：
```typescript
@@ -24,11 +24,22 @@ export class KlassSelectComponent implements OnInit, ControlValueAccessor {
constructor(private httpClient: HttpClient) {
}
- writeValue(obj: any): void {
+ /**
+ * 將FormControl中的值通過(guò)此方法寫(xiě)入
+ * FormControl的值每變換一次，該方法將被重新執(zhí)行一次
+ * 相當(dāng)于@Input() set xxx
+ * @param obj 此類型取決于當(dāng)前組件的接收類型，比如此時(shí)我們接收一個(gè)類型為number的teacherId
+ */
+ writeValue(obj: number): void {
throw new Error('Method not implemented.');
}
- registerOnChange(fn: any): void {
+ /**
+ * 組件需要向父組件彈值時(shí)，直接調(diào)用參數(shù)中的fn方法
+ * 相當(dāng)于@Output()
+ * @param fn 此類型取決于當(dāng)前組件的彈出值類型，比如我們當(dāng)前將彈出一個(gè)類型為number的teacherId
+ */
+ registerOnChange(fn: (data: number) => void): void {
throw new Error('Method not implemented.');
}
```
成功實(shí)現(xiàn)接口，并添加相應(yīng)的方法后，接下來(lái)我們需要通過(guò)聲明的方法來(lái)使用響應(yīng)式表單認(rèn)識(shí)當(dāng)前組件。
## 聲明
在使用攔截器時(shí)我們使用了`provide`以及`useClass`來(lái)將` MockApiTestingInterceptor.forRoot()`成功的聲明成了一個(gè)HTTP攔截器（HTTP_INTERCEPTORS）。在此聲明組件支持`FormControl`也是同樣的道理：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select.component.ts
@@ -1,12 +1,18 @@
-import {Component, OnInit, EventEmitter, Output, Input} from '@angular/core';
+import {Component, OnInit, EventEmitter, Output, Input, forwardRef} from '@angular/core';
import {Teacher} from '../../entity/teacher';
import {HttpClient} from '@angular/common/http';
-import {ControlValueAccessor, FormControl} from '@angular/forms';
+import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
@Component({
selector: 'app-klass-select',
templateUrl: './klass-select.component.html',
- styleUrls: ['./klass-select.component.css']
+ styleUrls: ['./klass-select.component.css'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR, multi: true,
+ useExisting: forwardRef(() => KlassSelectComponent) ??
+ }
+ ]
})
```
在聲明攔截器時(shí)，使用的是`useClass`，注意在這使用`useExisting` ??。 `forwardRef()`是一個(gè)方法，該方法中接收了一個(gè)回調(diào)函數(shù)`() => KlassSelectComponent`，該回調(diào)函數(shù)將`KlassSelectComponent`作為了返回值。該方法的作用是防止在`KlassSelectComponent`引用`KlassSelectComponent`而引發(fā)的引用循環(huán)（了解即可）。
> 剪頭函數(shù)：`() => KlassSelectComponent`等價(jià)于：`() => return KlassSelectComponent`。
響應(yīng)式表單在解析`FormControl`時(shí)將調(diào)用這個(gè)回調(diào)方法 ：
```typescript
providers: [
{
provide: NG_VALUE_ACCESSOR, multi: true,
- useExisting: forwardRef(() => KlassSelectComponent)
+ useExisting: forwardRef(() => {
+ console.log('useExisting->forwardRef中的回調(diào)方法被調(diào)用一次');
+ return KlassSelectComponent;
+ })
}
]
})
```
此時(shí)響應(yīng)式表單便認(rèn)識(shí)了當(dāng)前的子組件為`FormControl`，不再報(bào)`No value accessor`異常了。
該異常是我們使用IDE自動(dòng)生成`writeValue()`方法時(shí)填充的語(yǔ)句：
```typescript
writeValue(obj: number): void {
throw new Error('Method not implemented.'); ??
}
```
報(bào)此異常說(shuō)明方法被成功的調(diào)用了。
## 完成功能
參考`@Input()`、`@Output()`書(shū)寫(xiě)功能代碼如下：
```typescript
/**
* 將FormControl中的值通過(guò)此方法寫(xiě)入
* FormControl的值每變換一次，該方法將被重新執(zhí)行一次
* 相當(dāng)于@Input() set xxx
* @param obj 此類型取決于當(dāng)前組件的接收類型，比如此時(shí)我們接收一個(gè)類型為number的teacherId
*/
writeValue(obj: number): void {
console.log('writeValue is called');
this.teacherId.setValue(obj);
}
/**
* 組件需要向父組件彈值時(shí)，直接調(diào)用參數(shù)中的fn方法
* 相當(dāng)于@Output()
* @param fn 此類型取決于當(dāng)前組件的彈出值類型，比如我們當(dāng)前將彈出一個(gè)類型為number的teacherId
*/
registerOnChange(fn: (data: number) => void): void {
console.log(`registerOnChange is called`);
this.teacherId.valueChanges
.subscribe(data => fn(data));
}
registerOnTouched(fn: any): void {
console.warn('registerOnTouched not implemented');
}
```
如果我們?cè)谔囟ǖ姆椒ㄉ霞右恍┹敵?，則會(huì)更加清晰的明了Angular的執(zhí)行過(guò)程：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select-form-control.component.spec.ts
@@ -4,14 +4,18 @@ import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing';
import {TeacherMockApi} from '../../mock-api/teacher.mock.api';
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
import {getTestScheduler} from 'jasmine-marbles';
@Component({
template: '<h1>Test:</h1><app-klass-select [formControl]="teacherIdFormControl"></app-klass-select>'
})
-class TestComponent {
+class TestComponent implements OnInit {
teacherIdFormControl = new FormControl();
+
+ ngOnInit(): void {
+ console.log('父組件初始化');
+ }
}
```
教師選擇組件：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select.component.ts
@@ -60,12 +60,16 @@ export class KlassSelectComponent implements OnInit, ControlValueAccessor {
}
ngOnInit(): void {
+ console.log('教師選擇組件初始化');
// 關(guān)注teacherId
this.teacherId.valueChanges
.subscribe((data: number) => this.beChange.emit(data));
// 獲取所有教師
this.httpClient.get<Array<Teacher>>('teacher')
.subscribe(
- teachers => this.teachers = teachers);
+ teachers => {
+ this.teachers = teachers;
+ console.log('教師選擇組件接收到了數(shù)據(jù)');
+ });
}
}
```
單元測(cè)試代碼：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select-form-control.component.spec.ts
@@ -4,14 +4,18 @@ import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing';
import {TeacherMockApi} from '../../mock-api/teacher.mock.api';
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
import {getTestScheduler} from 'jasmine-marbles';
@Component({
template: '<h1>Test:</h1><app-klass-select [formControl]="teacherIdFormControl"></app-klass-select>'
})
-class TestComponent {
+class TestComponent implements OnInit {
teacherIdFormControl = new FormControl();
+
+ ngOnInit(): void {
+ console.log('父組件初始化');
+ }
}
describe('KlassSelectComponent', () => {
@@ -38,6 +42,7 @@ describe('KlassSelectComponent', () => {
fit('響應(yīng)式表單', () => {
// 創(chuàng)建一個(gè)組件夾具（容器），這就像我們要測(cè)試顯卡是否正常功能時(shí)，需要有一臺(tái)供顯卡工
作的電腦一樣。
// testFixture便是TestComponent這塊顯卡賴以工作的電腦
+ console.log('開(kāi)始創(chuàng)建父組件');
const fixture = TestBed.createComponent(TestComponent);
// 獲取testFixture這臺(tái)電腦上的testComponent顯卡
@@ -45,10 +50,13 @@ describe('KlassSelectComponent', () => {
// 調(diào)用detectChanges()渲染V層，開(kāi)始渲染V層中的子組件。
// 由于當(dāng)前Test組件未請(qǐng)求后臺(tái)，所以省略了getTestScheduler().flush();
// 當(dāng)然了，寫(xiě)上也無(wú)防
+ console.log('首次渲染組件');
fixture.detectChanges();
// 模擬返回?cái)?shù)據(jù)后，進(jìn)行變更檢測(cè)重新渲染子組件V層
+ console.log('觸發(fā)后臺(tái)模擬數(shù)據(jù)發(fā)送');
getTestScheduler().flush();
+ console.log('重新渲染組件');
fixture.detectChanges();
});
});
```
控制臺(tái)如下：
## 測(cè)試
最后我們?cè)诟附M件中完成組件的初始化，并增加一個(gè)方法來(lái)顯示組件中`FormControl`的值以確認(rèn)子組件工作正常：
```typescript
+++ b/first-app/src/app/clazz/klass-select/klass-select-form-control.component.spec.ts
@@ -8,14 +8,18 @@ import {Component, OnInit} from '@angular/core';
import {getTestScheduler} from 'jasmine-marbles';
@Component({
- template: '<h1>Test:</h1><app-klass-select [formControl]="teacherIdFormControl"></app-klass-select>'
+ template: '<h1 (click)="onTest()">Test:</h1><app-klass-select [formControl]="teacherIdFormControl"></app-klass-select>'
})
class TestComponent implements OnInit {
- teacherIdFormControl = new FormControl();
+ teacherIdFormControl = new FormControl(1);
ngOnInit(): void {
console.log('父組件初始化');
}
+
+ onTest(): void {
+ console.log('teacherId值為', this.teacherIdFormControl.value);
+ }
}
describe('KlassSelectComponent', () => {
```
最終效果一，自動(dòng)選擇教師：
最終效果二，選擇其它教師后點(diǎn)擊`Test`成功打印選擇的教師ID：
## 本節(jié)作業(yè)
本節(jié)中我們?cè)跍y(cè)試組件中引入了子父組件`app-klass-select`，這使得`useExisting`中`forwardRef`中的回調(diào)函數(shù)被調(diào)用了一次。請(qǐng)嘗試回答以下問(wèn)題：
- 如果父組件未引入子組件`app-klass-select`，`useExisting`中`forwardRef`中的回調(diào)函數(shù)會(huì)被調(diào)用嗎？
- 如果父組件引入了多次組件`app-klass-select`，`useExisting`中`forwardRef`中的回調(diào)函數(shù)會(huì)被調(diào)用幾次？
- 驗(yàn)證自己的猜測(cè)。
-
| 名稱 | 鏈接 |
| ---------------------------------------- | ------------------------------------------------------------ |
| ControlValueAccessor | [https://angular.cn/api/forms/ControlValueAccessor](https://angular.cn/api/forms/ControlValueAccessor) |
| NG_VALUE_ACCESSOR | [https://angular.cn/api/forms/NG_VALUE_ACCESSOR](https://angular.cn/api/forms/NG_VALUE_ACCESSOR) |
| DefaultValueAccessor | [https://angular.cn/api/forms/DefaultValueAccessor](https://angular.cn/api/forms/DefaultValueAccessor) |
| 別名提供者：`useExisting` | [https://angular.cn/guide/dependency-injection-in-action#alias-providers-useexisting](https://angular.cn/guide/dependency-injection-in-action#alias-providers-useexisting) |
| 使用一個(gè)前向引用(*forwardRef*)來(lái)打破循環(huán) | [https://angular.cn/guide/dependency-injection-in-action#break-circularities-with-a-forward-class-reference-forwardref](https://angular.cn/guide/dependency-injection-in-action#break-circularities-with-a-forward-class-reference-forwardref) |
| 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.4.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.4.5.zip) |
##
- 序言
- 第一章 Hello World
- 1.1 環(huán)境安裝
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教師管理
- 2.1 教師列表
- 2.1.1 初始化原型
- 2.1.2 組件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 請(qǐng)求后臺(tái)數(shù)據(jù)
- 2.2.1 HttpClient
- 2.2.2 請(qǐng)求數(shù)據(jù)
- 2.2.3 模塊與依賴注入
- 2.2.4 異步與回調(diào)函數(shù)
- 2.2.5 集成測(cè)試
- 2.2.6 本章小節(jié)
- 2.3 新增教師
- 2.3.1 組件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 對(duì)接后臺(tái)
- 2.3.4 路由
- 2.4 編輯教師
- 2.4.1 組件初始化
- 2.4.2 獲取路由參數(shù)
- 2.4.3 插值與模板表達(dá)式
- 2.4.4 初識(shí)泛型
- 2.4.5 更新教師
- 2.4.6 測(cè)試中的路由
- 2.5 刪除教師
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome圖標(biāo)庫(kù)
- 2.6.3 firefox
- 2.7 總結(jié)
- 第三章 用戶登錄
- 3.1 初識(shí)單元測(cè)試
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 著陸組件
- 3.5 @Output
- 3.6 TypeScript 類
- 3.7 瀏覽器緩存
- 3.8 總結(jié)
- 第四章 個(gè)人中心
- 4.1 原型
- 4.2 管道
- 4.3 對(duì)接后臺(tái)
- 4.4 x-auth-token認(rèn)證
- 4.5 攔截器
- 4.6 小結(jié)
- 第五章 系統(tǒng)菜單
- 5.1 延遲及測(cè)試
- 5.2 手動(dòng)創(chuàng)建組件
- 5.3 隱藏測(cè)試信息
- 5.4 規(guī)劃路由
- 5.5 定義菜單
- 5.6 注銷
- 5.7 小結(jié)
- 第六章 班級(jí)管理
- 6.1 新增班級(jí)
- 6.1.1 組件初始化
- 6.1.2 MockApi 新建班級(jí)
- 6.1.3 ApiInterceptor
- 6.1.4 數(shù)據(jù)驗(yàn)證
- 6.1.5 教師選擇列表
- 6.1.6 MockApi 教師列表
- 6.1.7 代碼重構(gòu)
- 6.1.8 小結(jié)
- 6.2 教師列表組件
- 6.2.1 初始化
- 6.2.2 響應(yīng)式表單
- 6.2.3 getTestScheduler()
- 6.2.4 應(yīng)用組件
- 6.2.5 小結(jié)
- 6.3 班級(jí)列表
- 6.3.1 原型設(shè)計(jì)
- 6.3.2 初始化分頁(yè)
- 6.3.3 MockApi
- 6.3.4 靜態(tài)分頁(yè)
- 6.3.5 動(dòng)態(tài)分頁(yè)
- 6.3.6 @Input()
- 6.4 編輯班級(jí)
- 6.4.1 測(cè)試模塊
- 6.4.2 響應(yīng)式表單驗(yàn)證
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定義FormControl
- 6.4.6 代碼重構(gòu)
- 6.4.7 小結(jié)
- 6.5 刪除班級(jí)
- 6.6 集成測(cè)試
- 6.6.1 惰性加載
- 6.6.2 API攔截器
- 6.6.3 路由與跳轉(zhuǎn)
- 6.6.4 ngStyle
- 6.7 初識(shí)Service
- 6.7.1 catchError
- 6.7.2 單例服務(wù)
- 6.7.3 單元測(cè)試
- 6.8 小結(jié)
- 第七章 學(xué)生管理
- 7.1 班級(jí)列表組件
- 7.2 新增學(xué)生
- 7.2.1 exports
- 7.2.2 自定義驗(yàn)證器
- 7.2.3 異步驗(yàn)證器
- 7.2.4 再識(shí)DI
- 7.2.5 屬性型指令
- 7.2.6 完成功能
- 7.2.7 小結(jié)
- 7.3 單元測(cè)試進(jìn)階
- 7.4 學(xué)生列表
- 7.4.1 JSON對(duì)象與對(duì)象
- 7.4.2 單元測(cè)試
- 7.4.3 分頁(yè)模塊
- 7.4.4 子組件測(cè)試
- 7.4.5 重構(gòu)分頁(yè)
- 7.5 刪除學(xué)生
- 7.5.1 第三方dialog
- 7.5.2 批量刪除
- 7.5.3 面向?qū)ο?/a>
- 7.6 集成測(cè)試
- 7.7 編輯學(xué)生
- 7.7.1 初始化
- 7.7.2 自定義provider
- 7.7.3 更新學(xué)生
- 7.7.4 集成測(cè)試
- 7.7.5 可訂閱的路由參數(shù)
- 7.7.6 小結(jié)
- 7.8 總結(jié)
- 第八章 其它
- 8.1 打包構(gòu)建
- 8.2 發(fā)布部署
- 第九章 總結(jié)