【Angular系列】3. 自定义checkbox多选组件

上一篇中讲了button组件的编写，这篇说一下checkbox组件 --- 多选框，能够勾选、取消勾选，禁用，支持NgModel、reactive forms，支持勾选事件监听等。

1. 和button同样，新建一个checkbox文件夹，添加相应的文件以下：

​

2. 添加color，是否勾选，disabled等input属性，由于咱们都使用了color属性，因此以前写在button里面控制primary/accent/warn颜色的mixin咱们抽出来使用了，重命名minxi名称x-button-color为x-controls-color，咱们能够预见到这个minxi在后面的组件一样会使用到，以下图：

​​

3. 这里咱们为了支持NgModel和reactive forms，咱们引入了ControlValueAccessor这个angular接口，而后分别实现他的writeValue和registerOnChange这2个方法，以下图：这里简单的介绍一下，writeValue是写入最新的值绑定到html元素中去，registerOnChange是当html元素中的值发生变化后，trigger事件给angular对应的内置组件（以下第3张图，咱们emit了最新的html元素的改变供reactive forms订阅这个改变），好比reactive forms等。这样就完成了双向绑定及reactive forms和html原生元素的沟通。

​​​

4. 这里咱们使用了NgModel，因此咱们须要在module里面引入FormsModule。若是没有引入angular会报错找不到ngmodel相似的错误。

​

5. 这样，咱们的checkbox的功能基本完成，最后就是写入一个checkbox的sample，以下：

​​​​

github的地址：github.com/KevinZhang1…

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