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

 更新时间:2019-07-11 22:00:58   作者:佚名   我要评论(0)

一、准备工作


Angular7(以下简称ng7),已经跟之前版本大有不同。新建工程后,可方便创建library(简称lib),lib是什么呢?就是一个npm包的源码包。npm作为

一、准备工作

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

  /* 水平排列 */
  @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的时候调用。因此,我们在重写这两个方法的时候应该注意,是重写一个还是都要重写。本组件两个方法都重写了,因为值变更的时机自定义成了blur。

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

总结

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

您可能感兴趣的文章:

  • Angular7创建项目、组件、服务以及服务的使用
  • Angular7中创建组件/自定义指令/管道的方法实例详解

相关文章

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

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

    一、准备工作 Angular7(以下简称ng7),已经跟之前版本大有不同。新建工程后,可方便创建library(简称lib),lib是什么呢?就是一个npm包的源码包。npm作为
    2019-07-11
  • Python 200行代码实现一个滑动验证码过程详解

    Python 200行代码实现一个滑动验证码过程详解

    前言 做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动、点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致
    2019-07-11
  • Spring Boot利用Docker快速部署项目的完整步骤

    Spring Boot利用Docker快速部署项目的完整步骤

    1.简介 建议阅读本文最好对Dokcer有一些了解 首先我们先了解一下Docker是什么 Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口。它是
    2019-07-11
  • 用python给自己做一款小说阅读器过程详解

    用python给自己做一款小说阅读器过程详解

    前言 前一段时间书荒的时候,在喜马拉雅APP发现一个主播播讲的小说-大王饶命。听起来感觉很好笑,挺有意思的,但是只有前200张是免费的,后面就要收费。一章两
    2019-07-11
  • Python的log日志功能及设置方法

    Python的log日志功能及设置方法

    引入:Python中有个logging模块可以完成相关信息的记录,在debug时用它往往事半功倍 一、日志级别(从低到高): DEBUG :详细的信息,通常只出现在诊断问题上 IN
    2019-07-11
  • 基于sklearn实现Bagging算法(python)

    基于sklearn实现Bagging算法(python)

    本文使用的数据类型是数值型,每一个样本6个特征表示,所用的数据如图所示: 图中A,B,C,D,E,F列表示六个特征,G表示样本标签。每一行数据即为一个样本的六个
    2019-07-11
  • 使用vue for时为什么要key【推荐】

    使用vue for时为什么要key【推荐】

    前言: 用vue框架写前端代码时经常会用用到v-for这个方法,但使用此方法时vue推荐我们加上一个唯一标识key这是为什么呢?阅读了网上各位大神的文章以及自己的
    2019-07-11
  • 聊聊spring boot的WebFluxTagsProvider的使用

    聊聊spring boot的WebFluxTagsProvider的使用

    序 本文主要研究一下webflux的WebFluxTagsProvider WebFluxTagsProvider spring-boot-actuator-2.1.5.RELEASE-sources.jar!/org/springframework/boot/
    2019-07-11
  • 微信小程序开发常见问题及解决方案

    微信小程序开发常见问题及解决方案

    前言 我们在做微信小程序开发的过程中,总会遇到各种奇葩的问题。今天就把我在小程序开发过程中遇到的各种问题,及对应的解决方案总结在这里,方便以后自己回
    2019-07-11
  • Docker基础教程之Dockerfile语法详解

    Docker基础教程之Dockerfile语法详解

    前言 Dockfile是一种被Docker程序解释的脚本,Dockerfile由一条一条的指令组成,每条指令对应Linux下面的一条命令。Docker程序将这些Dockerfile指令翻译真正的
    2019-07-11

最新评论