【Angular系列】4. 自定义radio-button单选组件

前面一篇咱们自定义了checkbox组件，而后顺便把通用mixin写上了，并且实现了checkbox组件的NgModel和Reactive forms两种绑定。这一篇咱们继续来自定义radio-button组件，这个组件和checkbox比较相似，只不过这个是一组单选框，即在一个radio button group里面的若干个radio button是互斥了，只能选择其中的某一个，这个是主逻辑，而后咱们还须要实现主题色、禁用所有、禁用其中某一个、NgModel&Reactive forms绑定等。

1.一样的，咱们先新增一个radio-button文件夹，添加相应的文件以下：

​

2. 前面说了，由于单选框组里面的每一个单选框是互斥的，因此咱们须要在radio-button的外面套一层radio-button-group，若是没有这个radio-button-group则直接报错，同时定义@Input属性，另外咱们须要在radio-button-group访问它下面的每个radio-button，因此定义一个contentchildren，以下图：

​

3. 由于radio-button是做为radio-button-group的contentchild出现的，咱们须要在radio-button-group的生命周期钩子ngAfterContentInit里面初始化每个radio-button，分别给他们赋值绑定以下图：

​

4. 接下来咱们看一下radio-button的html组成，是否是似曾相识，没错，这个是直接拷贝的checkbox组件的html，radio-button其实就是一组checkbox在一个group里面，而后咱们加了一些限制让其符合radio-button的逻辑规则，radio-button里面的逻辑就不赘述了，直接上码：

​​

5. 最后咱们来写一个radio-button的sample例子，而后运行：

​​​​

github地址：github.com/KevinZhang1…

在线Demo地址：stackblitz.com/edit/x-radi…