【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…