Angular5中提取公共组件之radio list的实例代码
程序员文章站
2022-03-20 15:00:46
本文给大家说一下radio list的公共组件提取。
radio list组件提取起来很方便,不想checkbox那么复杂。
radio-list.component....
本文给大家说一下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的实例代码,希望对大家有所帮助