【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的地址：https://github.com/KevinZhang19870314/quick-pai/tree/master/projects/x-controls/src/lib/checkbox

在线Demo地址：https://stackblitz.com/edit/x-checkbox?embed=1&file=src/app/app.component.ts