用Angular7开发无线电组件的整个过程

一、准备工作

Angular7(以下简称ng7)与之前的版本有很大不同。新项目构建后，创建库(简称LIB)很方便。什么是LIB？是一个npm包的源代码包。作为一个强大的包管理器，npm已经成为许多FEer分享智慧成果的倍增器。本文主要介绍一个自己编写的无线电组件。

第二，开发组件无线电流程

1.使用ng cli创建新项目和lib

//安装ng clin pm install-g @ angular/CLI//创建新项目ng new-ng-project//输入ng-project创建libng生成库radio2。生成结构如图所示。然后开始编写组件。

3.收音机的结构如下

！-描述：这实际上是一个电台群，因为电台一般是成组使用的，这里有几点需要注意

1.组中无线电的名称属性在组外是一致且唯一的

2.通过选中的属性设置无线电的选定状态，不要将其写入[attr。选中]-

div class=' input-wrap '[class . hor]=' horizontal ' div class=' custom-radio ' * ngFOr=' let数据项；let I=index ' input # input class=' custom-input '[name]=' name ' id=' { ' radio _ ' name I } } ' type=' radio '[value]=' item . value '(单击)=' clickhandler (item。value)' [checked]='项。value===value '[disabled]=' disabled ' label class=' custom-label ' for=' { ' radio _ ' name I } } ' { { item。名称} }/标签/div

导出类无线电组组件实现控制值访问器{/*无线电数组*/@Input()数据：无线电[]=[]；/*单选类型原生或按钮类型*/@Input()类型：字符串；/* name id */@ input()name : string=this。idser.generate()。替换(///g，' _ ')；/*水平排列*/@ input () horizontal:布尔值；/* disable */@ Input()disabled :布尔值；/*单选值*/@Input()值：任意；构造函数(私有idser : id service){ } click handler(val : any){ this . value=val；//更改控件this.controlChange(this.value)的值；this . controlTouch(this . value)；} WriteValue(value : any): void { this . value=value；} registoronchange(fn : Function): void { this . control change=fn } registorontouched(fn : Function): void { this . control touch=fn } Private control change : Function=()={ } Private control touch : Function=()={ } }说明：其实组件代码不多，但需要注意的是我们继承了一个ControlValueAccessor的接口，我觉得这里值得一说。这是ng的一个表单API，可以方便原生DOM和ng表单传递值。这是在组件元数据中定义的

@ Component({ selector : ' radio group '，templateUrl: '。/radiogroup.component.html '，providers :[{ provider : NG _ VALUE _ ACCESSOR，Use existing : forward ref(()=radio group component)，multi: true，}]})，其中有两个重要的方法需要覆盖，分别是registerOnChange和registerOnTouched，以这种方式在angular中定义和使用

当formcontrol的updateOn(这个属性可以自定义)的值是变化或模糊时，就会调用它们。所以在重写这两种方法的时候，要注意是重写一种还是两种都重写。该组件的两种方法都被覆盖，因为值更改的时间被自定义为模糊。

第三，这是我包开发的无线电组件。请大牛朋友多给我一些建议，以后我们会继续介绍Angular的发展和研究。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。