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

前端之家收集整理的这篇文章主要介绍了Angular5中提取公共组件之radio list的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文给大家说一下Radio List的公共组件提取

Radio List组件提取起来很方便,不想CheckBox那么复杂。

radio-list.component.ts

dioItem } 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 = new EventEmitter(); constructor() { } ngOnInit() { } changeSelected() { let data = { value: this.model,name: this.name }; this.onChange.emit(data); } }

radio-list.component.html

dio abc-radio-primary"> dio" [value]="item.id" [(ngModel)]="model" (change)="changeSelected()" name="{{name}}" id="{{name}}_{{item.id}}">

在相关引用的module中注册

dioListComponent } 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中引用如下:

dio-list [list]="sourceArr" [name]="'selectedSource'" [colNum]="12" [(selectModel)]="selectedSource" (selectChange)="selectChange($event)">

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

总结

以上所述是小编给大家介绍的Angular5中提取公共组件之radio list的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章