Angular5中提取公共组件之radio list的实例代码

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';import { RadioItem } from '../../model/radio';import { NgModel } from '@angular/forms';@Component({  selector: 'app-radio-list',  templateUrl: './radio-list.component.html',  styleUrls: ['./radio-list.component.css']})export class RadioListComponent implements OnInit {  @Input() list: RadioItem[];  @Input() name: string;  @Input() colNum: number = 6;  @Input("selectModel") model: string;  @Output("selectChange") onChange: EventEmitter<any> = new EventEmitter<any>();  constructor() { }  ngOnInit() {  }  changeSelected() {    let data = { value: this.model, name: this.name };    this.onChange.emit(data);  }}

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

import { RadioListComponent } from '../components/radio-list/radio-list.component';export const routes = [  { path: '', component: xxxComponent, pathMatch: 'full' }];@NgModule({  imports: [...],  declarations: [...    , RadioListComponent    , ...],  providers: []})export class xxxModule {  static routes = routes;}

 <app-radio-list [list]="sourceArr"         [name]="'selectedSource'"         [colNum]="12"        [(selectModel)]="selectedSource"        (selectChange)="selectChange($event)"> </app-radio-list>

 selectChange(model: any) {   this[model.name] = model.value; }