利用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 相关文章推荐
jquery获得option的值和对option进行操作
Dec 13 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
js实现无缝循环滚动
Jun 23 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
基于Vue实现timepicker
Apr 25 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
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
escape unescape的php下的实现方法
2007/04/27 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python中count函数知识点浅析
2020/12/17 Python
python如何实现递归转非递归
2021/02/25 Python
python绘制汉诺塔
2021/03/01 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
课例研修方案
2014/05/31 职场文书
社区端午节活动总结
2015/02/11 职场文书
答谢酒会主持词
2015/07/02 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript