利用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 concat数组累加 示例
Sep 03 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
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获取twitter最新消息的方法
2015/04/14 PHP
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
jquery编写日期选择器
2017/03/16 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
浅谈js中的bind
2019/03/18 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python实现把数字转换成中文
2015/06/29 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python单例模式的多种实现方法
2019/07/26 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
小学优秀学生评语
2014/12/29 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
MySQL 数据表操作
2022/05/04 MySQL
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis