利用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里使用Dom操作Xml
Sep 20 Javascript
javascript中length属性的探索
Jul 31 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
TypeScript入门-接口
Mar 30 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP多例模式介绍
2013/06/24 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
用Python shell简化开发
2018/08/08 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
幼儿园老师辞职信
2014/01/20 职场文书
厂长岗位职责
2014/02/19 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
yy生日主持词
2014/03/20 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
个园导游词
2015/02/04 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers