新增課程時需要選擇綁定的班級，班級的個數可以是多個，此時適用于使用checkbox實現。為增加其復用性，本節將其直接打造為一個共享組件。并在課程新增中使用該組件完成班級的選擇。 # 功能開發 公用的組件加入到CoreModule中： ``` panjiedeMac-Pro:web-app panjie$ cd src/app/core/ panjiedeMac-Pro:core panjie$ ng g c multipleSelect CREATE src/app/core/multiple-select/multiple-select.component.sass (0 bytes) CREATE src/app/core/multiple-select/multiple-select.component.html (30 bytes) CREATE src/app/core/multiple-select/multiple-select.component.spec.ts (685 bytes) CREATE src/app/core/multiple-select/multiple-select.component.ts (305 bytes) UPDATE src/app/core/core.module.ts (486 bytes) ``` ## V層 src/app/core/multiple-select/multiple-select.component.html ```html <div> <label class="label" *ngFor="let data of list$? | async?"> <input type="checkbox" (change)="onChange(data)?"> {{data.name}} </label> </div> ``` * ? 定義變量時以$結尾，表明該變量為一個可觀察(訂閱)的數據源 * ? angular提供的async管道實現了自動訂閱觀察的數據源 * ? checkbox被點擊時觸發change事件 >[success] async 管道會訂閱一個 Observable 或 Promise，并返回它發出的最近一個值。 當新值到來時，async 管道就會把該組件標記為需要進行變更檢測。當組件被銷毀時，async 管道就會自動取消訂閱，以消除潛在的內存泄露問題。 src/app/core/multiple-select/multiple-select.component.sass ```sass label margin-right: 1em ``` ## C層 src/app/core/multiple-select/multiple-select.component.ts ```typescript import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {Observable} from 'rxjs'; @Component({ selector: 'app-multiple-select', templateUrl: './multiple-select.component.html', styleUrls: ['./multiple-select.component.sass'] }) export class MultipleSelectComponent implements OnInit { /** 數據列表 */ @Input() list$: Observable<Array<{ name: string }>>; /** 事件彈射器，用戶點選后將最終的結點彈射出去 */ @Output() changed = new EventEmitter<Array<any>>(); constructor() { } /** 用戶選擇的對象 */ selectedObjects = new Array<any>(); ngOnInit() { } /** * 點擊某個checkbox后觸發的函數 * 如果列表中已存在該項，則移除該項 * 如果列表中不存在該項，則添加該項 */ onChange(data: any) { let found = false; this.selectedObjects.forEach((value, index) => { if (data === value) { found = true; this.selectedObjects.splice(index, 1); } }); if (!found) { this.selectedObjects.push(data); } this.changed.emit(this.selectedObjects); } } ``` ## 單元測試 src/app/core/multiple-select/multiple-select.component.spec.ts ```typescript import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {MultipleSelectComponent} from './multiple-select.component'; import {Subject} from 'rxjs'; import {Course} from '../../norm/entity/course'; import {By} from '@angular/platform-browser'; describe('MultipleSelectComponent', () => { let component: MultipleSelectComponent; let fixture: ComponentFixture<MultipleSelectComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [MultipleSelectComponent], imports: [] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(MultipleSelectComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('數據綁定測試', () => { ? const subject = new Subject<Course[]>(); component.list$ = subject.asObservable(); // 由于V層直接使用了異步async管道綁定的觀察者 // 所以在給C層對list$賦值后 // 使用detectChanges將此值傳送給V層 fixture.detectChanges(); // 當V層成功的綁定到數據源后，使用以下代碼發送數據，才能夠被V層接收到 subject.next([new Course({id: 1, name: 'test1'}), new Course({id: 2, name: 'test2'})]); fixture.detectChanges(); // 斷言生成了兩個label const div = fixture.debugElement.query(By.css('div')); expect(div.children.length).toBe(2); }); it('點選測試', () => { // 準備觀察者 const subject = new Subject<Course[]>(); component.list$ = subject.asObservable(); fixture.detectChanges(); // 發送數據 const course = new Course({id: 1, name: 'test1'}); subject.next([course]); fixture.detectChanges(); // 獲取checkbox并點擊斷言 const checkBox: HTMLInputElement = fixture.debugElement.query(By.css('input[type="checkbox"]')).nativeElement as HTMLInputElement; spyOn(component, 'onChange'); checkBox.click(); expect(component.onChange).toHaveBeenCalledWith(course); }); it('onChange -> 選中', () => { expect(component.selectedObjects.length).toBe(0); const course = new Course(); component.onChange(course); expect(component.selectedObjects.length).toBe(1); expect(component.selectedObjects[0]).toBe(course); }); it('onChange -> 取消選中', () => { const course = new Course(); component.selectedObjects.push(course); expect(component.selectedObjects.length).toBe(1); component.onChange(course); expect(component.selectedObjects.length).toBe(0); }); it('onChange -> 彈射數據', () => { let result: Array<any>; component.changed.subscribe((data) => { result = data; }); const course = new Course(); component.onChange(course); expect(result[0]).toBe(course); }); }); ``` 在V中使用了async管道實現了自動訂閱數據源的功能。? 處對應的數據流大概如下：  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.3](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.3) | - | | AsyncPipe | [https://angular.cn/api/common/AsyncPipe](https://angular.cn/api/common/AsyncPipe) | 5 |