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

本文给大家说一下radio list的公共组件提取。

radio list组件提取起来很方便，不想checkbox那么复杂。

radio-list.component.ts

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);
  }
}

radio-list.component.html

<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>

在相关引用的module中注册

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;
}

对应的html中引用如下：

 <app-radio-list [list]="sourcearr"
         [name]="'selectedsource'"
         [colnum]="12"
        [(selectmodel)]="selectedsource"
        (selectchange)="selectchange($event)">
 </app-radio-list>

按照如上步骤，还缺少对应的selectchange($event):

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

总结

以上所述是小编给大家介绍的angular5中提取公共组件之radio list的实例代码，希望对大家有所帮助