上一篇文章已經搭建好了angular sample框架以及包含主題的組件庫，這一篇開始自定義組件，第一個組件button，想一下按鈕的功能很簡單，即點擊事件，多思考一下，還包括大小、顏色（主題控制），hover效果等。
1. 添加button組件：lib下面每個組件分開一個文件夾，這樣方便管理，外部引入庫組件也方便。
2. _button-theme.scss這個主題文件需要import到all theme文件中去，這樣才能使用我們的主題色。
3. 我們在button.ts裏面定義@Input()來接收按鈕大小和顏色，xSize和xColor，這裏可以預定義幾個通用的值，就是比較常用的值先預定義，剩下的放開，外部傳入即可。
4. 接下來傳入的值我們通過Renderer2這個core裏面提供的功能來設置到按鈕對應元素上去。
5. 最後我們的button.html很簡單，一個span裏面包了一個ng-content，也就是說我們的按鈕不光是文字，也可以自定義icon，圖片等內容。這裏有一個地方需要注意，我們在傳入顏色的時候傳入的primary、accent和warn這幾個angular material定義的標準顏色，必須要轉換爲具體的顏色然後賦值到css中去，所以我們寫了一個mixin和ngClass來控制一下，如下圖：
6. 這樣button基本完成，接下來我們在angular sample裏面寫一個使用的樣例：這樣不同的預定義主題下面的按鈕都有了，你也可以自己定義custom的主題，如果覺得預定義主題不好看的話。
這樣，我們的按鈕組件就初步完成了，在寫項目組件的時候可以先考慮通用的用的比較多的功能，後面慢慢的逐步補全即可。
github地址：https://github.com/KevinZhang19870314/quick-pai/tree/master/projects/x-controls/src/lib/button
在線Demo地址： https://stackblitz.com/edit/x-button?embed=1&file=src/app/app.component.ts