上一篇中講了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