利用Angular7开发一个Radio组件的全过程

 更新时间:2019年07月11日 14:17:32   作者:国之大殇   我要评论
这篇文章主要给大家介绍了关于如何利用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="input-wrap" [class.hor]="horizontal">
  <div class="custom-radio" *ngFor="let item of data; let i=index">
    <input #input class="custom-input" [name]="name" id="{{'radio_'+name+i}}" type="radio"
    [value]="item.value" (click)="clickHandler(item.value)" [checked]="item.value === value" 
    [disabled]="disabled">
    <label class="custom-label" for="{{'radio_'+name+i}}">{{item.name}}</label>
  </div>
</div>

4、radio组件主体代码如下

export class RadioGroupComponent implements ControlValueAccessor {
  /* 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);
  }

  writeValue(value: any): void {
    this.value = value;
  }
  registerOnChange(fn: Function): void {
    this.controlChange = fn
  }
  registerOnTouched(fn: Function): void {
    this.controlTouch = fn
  }
  private controlChange: Function = () => { }
  private controlTouch: Function = () => { }
}

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

@Component({
  selector: 'radiogroup',
  templateUrl: './radiogroup.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioGroupComponent),
    multi: true,
  }]
})

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


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

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

总结

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

相关文章

  • angularjs表格分页功能详解

    angularjs表格分页功能详解

    本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码,非常的简单实用,有需要的小伙伴可以参考下。
    2016-01-01
  • AngularJS基础 ng-srcset 指令简单示例

    AngularJS基础 ng-srcset 指令简单示例

    本文主要介绍AngularJS ng-srcset 指令,这里对ng-srcset 指令做了详细的资料整理,附有代码示例,有需要的小伙伴可以参考下
    2016-08-08
  • Angular实现购物车计算示例代码

    Angular实现购物车计算示例代码

    本篇文章主要介绍了Angular实现购物车计算示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 利用AngularJs实现京东首页轮播图效果

    利用AngularJs实现京东首页轮播图效果

    这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果,本文通过示例代码详细介绍了实现过程,对大家学习AngularJS具有一定参考借鉴价值,有需要的朋友们可以参考借鉴。
    2016-09-09
  • Angular4.x Event (DOM事件和自定义事件详解)

    Angular4.x Event (DOM事件和自定义事件详解)

    今天小编就为大家分享一篇Angular4.x Event (DOM事件和自定义事件详解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular如何在应用初始化时运行代码详解

    Angular如何在应用初始化时运行代码详解

    这篇文章主要给大家介绍了关于Angular如何在应用初始化时运行代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-06-06
  • AngularJS实现的select二级联动下拉菜单功能示例

    AngularJS实现的select二级联动下拉菜单功能示例

    这篇文章主要介绍了AngularJS实现的select二级联动下拉菜单功能,结合完整实例形式分析了AngularJS实现二级联动菜单的具体操作步骤与相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

    基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动

    这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-05-05
  • Agularjs妙用双向数据绑定实现手风琴效果

    Agularjs妙用双向数据绑定实现手风琴效果

    最近在工作总遇到需要实现类似手风琴效果的需求,下面小编通过本文给大家分享angularjs巧用双向数据绑定实现手风琴效果,需要的朋友可以参考下
    2017-05-05
  • angular仿支付宝密码框输入效果

    angular仿支付宝密码框输入效果

    本篇文章主要介绍了angular仿支付宝密码框输入效果,详细的介绍了使用ng写一个密码框格子支付模块,具有一定的参考价值,有兴趣的可以了解一下。
    2017-03-03

最新评论