Angular5中提取公共组件之radio list的实例代码
本文给大家说一下RadioList的公共组件提取。
RadioList组件提取起来很方便,不想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'] }) exportclassRadioListComponentimplementsOnInit{ @Input()list:RadioItem[]; @Input()name:string; @Input()colNum:number=6; @Input("selectModel")model:string; @Output("selectChange")onChange:EventEmitter=newEventEmitter (); constructor(){} ngOnInit(){ } changeSelected(){ letdata={value:this.model,name:this.name}; this.onChange.emit(data); } }
radio-list.component.html
{{item.name}}
在相关引用的module中注册
import{RadioListComponent}from'../components/radio-list/radio-list.component'; exportconstroutes=[ {path:'',component:xxxComponent,pathMatch:'full'} ]; @NgModule({ imports:[...], declarations:[... ,RadioListComponent ,...], providers:[] }) exportclassxxxModule{ staticroutes=routes; }
对应的html中引用如下:
按照如上步骤,还缺少对应的selectChange($event):
selectChange(model:any){ this[model.name]=model.value; }
总结
以上所述是小编给大家介绍的Angular5中提取公共组件之radiolist的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!