Angular5中提取公共组件之checkbox list

<div *ngIf="list" class="form-row">
<div class="col-{{colNum}} mb-2" *ngFor="let item of list">
<div class="form-check abc-checkbox abc-checkbox-primary">
<input class="form-check-input" type="checkbox" [value]="item.id" [(ngModel)]="item.checked" (change)="changeSelected()" id="{{name}}_{{item.id}}">
<label class="form-check-label" for="{{name}}_{{item.id}}">
{{item.name}}
</label>
</div>
</div>
</div>

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CheckboxItem } from '../../model/checkbox';
import { NgModel } from '@angular/forms';
import { filter } from 'rxjs/operator/filter'; @Component({
selector: 'app-checkbox-list',
templateUrl: './checkbox-list.component.html',
styleUrls: ['./checkbox-list.component.css']
})
export class CheckboxListComponent implements OnInit {
@Input() list: CheckboxItem[];
@Input() name: string;
@Input() colNum: number = 6;
@Output("selectChange") onChange: EventEmitter<any> = new EventEmitter<any>(); constructor() { } ngOnInit() {
}
changeSelected() {
let filters = this.list.filter(x => x.checked);
let ids = [] as any[];
for (var i = 0; i < filters.length; i++) {
ids.push(filters[i].id);
} this.onChange.emit({ value: ids, name: this.name });
}
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { CheckboxListComponent } from '../components/checkbox-list/checkbox-list.component';
......
export const routes = [
{ path: '', component: OrderBuyDataComponent, pathMatch: 'full' }
]; @NgModule({
imports: [FormsModule
, CommonModule
, ...],
declarations: [CheckboxListComponent
, ...],
providers: []
})
export class OrderModule {
static routes = routes;
}