微客导航 » 文章资讯 » Angular5中提取公共组件之radio list的实例代码

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

2023-09-10 12:39:05 307

本文给大家说一下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的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐