利用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, '_');

  /* 水?#33050;?#21015; */
  @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的时候调用。因此,我们在重写这两个方法的时候应该注意,是重写一个还是?#23478;?#37325;?#30784;?#26412;组件两个方法都重写了,因为值变更的时机自定义成了blur。

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

总结

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

相关文章

  • 在AngularJS框架中处理数据建模的方式解析

    在AngularJS框架中处理数据建模的方式解析

    这篇文章主要介绍了在AngularJS框架中处理数据建模的方式,作者同时也对AngularJS使用过程中的一些"坑"作了介绍,需要的朋友可以参考下
    2016-03-03
  • AngularJS改变元素显示状态

    AngularJS改变元素显示状态

    本文主要介绍使用AngularJS提供的ng-show和ng-hide指令实现自动监听某?#32423;?#22411;变量来改变元素显示状态。下面跟着小编一起来看下吧
    2017-04-04
  • AngularJS基础 ng-non-bindable 指令详细介绍

    AngularJS基础 ng-non-bindable 指令详细介绍

    本文主要讲解AngularJS ng-non-bindable 指令,这里帮大家整理了ng-non-bindable指令的基本知识资料,有需要的小伙伴可以参考下
    2016-08-08
  • 对angularjs框架下controller间的传值方法详解

    对angularjs框架下controller间的传值方法详解

    今天小编就为大家分享一篇对angularjs框架下controller间的传值方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 在 Angular 中使用Chart.js 和 ng2-charts的示例代码

    在 Angular 中使用Chart.js 和 ng2-charts的示例代码

    本篇文章主要介绍了在 Angular 中使用Chart.js 和 ng2-charts的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • AngularJS基础 ng-cloak 指令简单示例

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

    本文主要介绍AngularJS ng-cloak 指令,这里帮大家整理了ng-clock指令的基础资料,和简单的代码实例及效果图,学习AngularJS指令的朋友可以参考下
    2016-08-08
  • Angular实现跨域(搜索框的下拉列表)

    Angular实现跨域(搜索框的下拉列表)

    angular.js ?#28304;鴍sonp,实现跨域,下面来实现搜索框的下拉列表功能,本文思路明确,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-02-02
  • Angular.Js之Scope作用域的学习教程

    Angular.Js之Scope作用域的学习教程

    这篇文章主要给大家分享了关于Angular.Js之Scope作用域的学习教程 ,文中通过多个示例代码介绍的非常详细,相信对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • AngularJS表单验证功能分析

    AngularJS表单验证功能分析

    这篇文章主要介绍了AngularJS表单验证功能,结合具体实例形式分析了AngularJS表单验证的操作步骤、实现技巧与相关注意事项,需要的朋友可以参考下
    2017-05-05
  • 彻底学会Angular.js中的transclusion

    彻底学会Angular.js中的transclusion

    这篇文章主要给大家介绍Angular.js中transclusion的相关资料,希望通过这一篇文章大家能够弄懂Angular.js中的transclusion,文中介绍的很详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03

最新评论

时时彩包赢公式0369
江苏7位数守号 港式梭哈五张官方下载 七乐彩走势图2 河南快三开奖结果直播视频直播 彩票论坛网站大全 体彩7位数 黄大仙平特一肖大公开 福彩3d和差积断组技巧 扑克十三水出千设备 qq刮刮乐无法刮奖 极速十一选五 北京赛车公式软件 昌盛电子游戏机 6粒复式二中二多少组 145期福彩开奖号2019