使用Angular7开发一个Radio组件

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:Angular7(以下简称ng7),已经跟之前版本大有不同。新建工程后,可方便创建library(简称lib),lib是什么呢?就是一个npm包的源码包。npm作为强大的包管理器,已经成为很多FEer分享智慧成果的法器。本文主要介绍本人写的一个radio组件。说明:其实组件代码不是很多,但是应该注意到,我们继承了ng的一个interface ControlValueAccessor,这里我觉的是比较值得侃的地方。这是ng的一个forms API,可以方便原生DOM和ng forms传值。在组件元数据中这样定

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,
    }]
})
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入理解Nginx

深入理解Nginx

陶辉 / 机械工业出版社 / 2013-4-15 / 89.00元

本书是阿里巴巴资深Nginx技术专家呕心沥血之作,是作者多年的经验结晶,也是目前市场上唯一一本通过还原Nginx设计思想,剖析Nginx架构来帮助读者快速高效开发HTTP模块的图书。 本书首先通过介绍官方Nginx的基本用法和配置规则,帮助读者了解一般Nginx模块的用法,然后重点介绍如何开发HTTP模块(含HTTP过滤模块)来得到定制的Nginx,其中包括开发一个功能复杂的模块所需要了解的......一起来看看 《深入理解Nginx》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具