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


Posted in Javascript onJuly 11, 2019

一、准备工作

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、生成结构如图所示 接下来开始写组件

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

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中是这样定义和使用的

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

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

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

总结

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

Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
JQuery教学之性能优化
May 14 Javascript
浅谈JavaScript字符集
May 22 Javascript
再探JavaScript作用域
Sep 24 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
JS+CSS实现动态时钟
Feb 19 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 #Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 #Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
vue项目中实现缓存的最佳方案详解
Jul 11 #Javascript
浅入深出Vue之组件使用
Jul 11 #Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 #Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 #Javascript
You might like
PHP操作文件方法问答
2007/03/16 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python 判断网络连通的实现方法
2018/04/22 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
python实现学生成绩测评系统
2020/06/22 Python
python接入支付宝的实例操作
2020/07/20 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
小学教师学期末自我评价
2013/09/25 职场文书
单位单身证明范本
2014/01/11 职场文书
劳动模范事迹材料
2014/01/19 职场文书
应用英语专业自荐信
2014/01/26 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
委托书的样本
2015/01/28 职场文书
2015年工商所工作总结
2015/05/21 职场文书
小学作文之描写天气
2019/08/15 职场文书