全国咨询热线:18720358503

一键免费生成小程序_使用Angular7开发一个Radio组件

类别:媒体报道 发布时间:2021-01-07 浏览人次:

利用Angular7开发一个Radio组件的全过程       这篇文章主要给大家介绍了关于如何利用Angular7开发一个Radio组件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular7具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

Angular7(以下简称ng7),已经跟之前版本大有不同。新建工程后,可方便创建library(简称lib),lib是什么呢?就是一个npm包的源码包。npm作为强大的包管理器,已经成为很多FEer分享智慧成果的法器。本文主要介绍本人写的一个radio组件。

二、开发组件radio过程

1、使用ng cli,新建工程,创建lib

// 安装ng cli
npm install -g @angular/cli
// 新建工程
ng new ng-project
// 进入ng-project 创建一个lib
ng generate library radio

2、生成结构如图所示 接下来开始写组件

3、radio结构如下

!--说明:这其实是一个radio-group 因为radio一般都是分组使用,这里有几个注意点

1、组内radio的name属性保持一致、组外保持唯一

2、通过checked属性来设置radio的选中状态,一定不要写成[attr.checked]--

 div [class.hor]="horizontal" 
 div *ngFor="let item of data; let i=index" 
 input #input [name]="name" id="{{'radio_'+name+i}}" type="radio"
 [value]="item.value" (click)="clickHandler(item.value)" [checked]="item.value === value" 
 [disabled]="disabled" 
 label for="{{'radio_'+name+i}}" {{item.name}} /label 
 /div 
 /div 

4、radio组件主体代码如下

export class RadioGroupComponent essor {
 /* radio 数组 */
 @Input()
 data: Radio[] = [];
 /* radio 类型 原生或者按钮类型*/
 @Input()
 type: string;
 /* name标识 */
 @Input()
 name: string = this.idSer.generate().replace(/-/g, '_');
 /* 水平排列 */
 @Input()
 horizontal: boolean;
 /* 禁用 */
 @Input()
 disabled: boolean;
 /* radio 值 */
 @Input() value: any;
 constructor(private idSer: IdService) {
 clickHandler(val: any) {
 this.value = val;
 // 更改control的值
 this.controlChange(this.value);
 this.controlTouch(this.value);

说明:其实组件代码不是很多,但是应该注意到,essor,这里我觉的是比较值得侃的地方。这是ng的一个forms API,可以方便原生DOM和ng forms传值。在组件元数据中这样定义

@Component({
 selector: 'radiogroup',
 ',
 providers: [{
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() = RadioGroupComponent),
 multi: true,
})

其中,这里面有两个重要的方法需要overwrite,不错,就是registerOnChange和registerOnTouched,这两个方法在angular中是这样定义和使用的


他们分别是在formcontrol的updateOn(这个属性可以自定义)属性值为change或者blur的时候调用。因此,我们在重写这两个方法的时候应该注意,是重写一个还是都要重写。本组件两个方法都重写了,因为值变更的时机自定义成了blur。

三、这就是我的关于radio组件的封装开发,还请各位大牛朋友们多多指点,后续会继续推出关于Angular的开发以及研究。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对凡科的支持。


推荐阅读

一键免费生成小程序_使用Angular7开发一个Radio组件

运用Angular7开发设计一个Radio部件的整个过程 本文关键给大伙儿详细介绍了有关怎样运用Angular7开发设计一个Radio部件的有关材料,原文中根据实例编码详细介绍的十分详尽,对大伙...

2021-01-07
汽服门店开发小程序的优势有哪些

汽服店面开发设计微信小程序的优点有什么?微信小程序刮起的酷热,吸引住着各制造行业人员的目光。现如今的微信小程序线上结局景的运用越来越越普遍,轿车服务业也进到来到微...

2021-01-07
网站优化之域名的选择

凡科互联网十一钜惠价钱赠予服务器空间,数据信息库,帮助办理备案赠予3张滚屏图设计方案。包括一年完全免费售后服务服务 现价:¥4777¥998--- 限购政策77套,已购22套 ---马上查询...

2021-01-07
在北京网站建设过程中网页设计如何让用户有更

大家能看到很多的企业网站建设选用乳白色和浅色系的情况,传送出清新简洁的设计方案视觉效果。但看多了才腻味。一些企业网站建设早已倒转全部颜色,刚开始探寻深色调颜色的艺...

2021-01-07
白色布景抠图怎么操纵-监控企业官网建设案例

监管企业企业网站建设实例监管系统软件是智能安防系统软件中运用数最多的系统软件之一,如今市面上上比较合适的施工工地监管系统软件是手执式视頻通讯机器设备,视頻监管如今...

2021-01-07
广州凡科互联网科技股份有限公司招聘直播运营

招聘人数:11职位信息【岗位描述】1、针对APP运营目标,分解执行落地;2、不断优化直播流程,执行,并参与到直播等相关工作中;3、对接跨团队、跨部门的沟通工作,具有资源整合能...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信