使用Angular7开发一个Radio组件

Tony_Zby 发布于2019-08-23 18:26 / 2778人阅读

摘要：一准备工作以下简称已经跟之前版本大有不同。新建工程后，可方便创建简称是什么呢就是一个包的源码包。本文主要介绍本人写的一个组件。这是的一个可以方便原生和传值。本组件两个方法都重写了，因为值变更的时机自定义成了。

一、准备工作

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结构如下



    
        
        {{item.name}}

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的开发以及研究。

云服务器 GPU云服务器 vuejs组件使用组件开发前端组件开发在php中使用组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105235.html

Angular7.2.7路由初体验

摘要：记录自己在学习中对路由的理解路由不在的包中如果要使用的路由需要从中引入路由的使用子路由使用子路由使用方法父组件中在中导入模块然后在中加入即可就是路由的出口表示路由对应的组件应该在这里显示记录自己在学习angular中对路由的理解 angular路由不在angular的包中, 如果要使用angular的路由, 需要从@angular/router中引入路由的使用: 子路由使用: im...

KevinYan 2019-08-23 15:33 评论0 收藏0
Angular7 中使用 svg sprite

摘要：起因看到项目中很多，使用方法都是使用标签引入。解决方案在网上了解到可以将众多文件合并成一个，用的方式区分不同的图案，然后使用标签引用。在版本废弃了命令，不再支持自定义，而中的未提供自定义或是执行外挂脚本的配置。起因看到项目中很多svg，使用方法都是使用img标签引入。于是就想将svg合并，像字体图标那样方便使用。解决方案在网上了解到可以将众多svg文件合并成一个，用symb...

陈江龙 2019-08-26 13:53 评论0 收藏0
【官宣】WijmoJS 2018 v3 正式发布，全面支持Angular7

摘要：年末促销葡萄城岁末福利火热放送中前端开发工具包年度第三个大版本已经正式发布，本次更新除了全面支持之外，还允许用户使用在前端更高效地导出智能的分组表头属性全新的主题示例以及功能增强。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。【年末促销】葡萄城 2018 岁末福利火热放送中 WijmoJS（前端开发工具包）2018年度第三个大版本已经正...

suosuopuo 2019-08-23 13:42 评论0 收藏0