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