【Angular系列】1. 使用Angular material主題定義本身的組件庫的配色體系

本期爲Angular系列的第一篇文章，我會從這裏搭建Angular sample項目、組件庫、主題、而後每一個組件等。使之成爲一個比較通用的組件庫系列文章，目的有二：一、本身在寫系列文章過程當中不斷夯實基礎、不斷學習補缺；二、分享給一些不熟悉angular及自定義組件的同窗，使之快速上手並提升。

1. 使用Angular CLI命令行工具生成一個Angular sample的項目：這裏添加了一個optional的參數--style=scss，是爲了後面使用angular material的themes。待命令完成就生成了一個可npm start運行的標準的angular項目，其中workspace爲./quick-pai目錄。

ng n quick-pai --style=scss複製代碼

2. 由於咱們是要建立一個組件庫，因此咱們就依託這個標準的angular sample項目的workspace建立一個angular library項目，利用angular cli命令行：這裏使用了--prefix=x可選參數，在後面建立組件的時候統一使用x前綴，如「x-button」等。執行爲這個命令後咱們的項目結果以下：

ng g library x-controls --prefix=x複製代碼

​

3. 添加主題文件夾theme到組件庫項目中（使用了angular material的主題，可是這裏並無安裝angular material完整組件庫，只是參考使用了他的主題themes的思想，之因此這麼作顯而易見，一來安裝了它的庫太大，二來咱們是學習如何寫angular組件及主題，若是安裝了它，咱們這個系列就不用寫了，你們看angular material的源碼好了，它的源碼仍是有點複雜的，因此angular系列文章只會借鑑它，並不會複雜到它的程度，一來本人水平有限，二來沒有精力~-~）。主題文件夾截圖以下：包括一些core的非主題相關的東西，這裏姑且無論它是幹什麼用的，大概就是隻有組件纔會用到，當你用組件的時候引入就行了；另外這裏有一個調色板文件_palette.scss，還有一個主題的helper方法的文件_theming.scss，這個文件會定義一些function來拿到調色板裏面具體的顏色、定義一些主題等等；還有一個給組件庫的組件引入主題的文件_all-theme.scss；還有一個就是一些預置的主題。基本上就這些，截圖以下：

​​

4. 這樣一個組件庫的主題框架就搭建起來了，咱們就能夠在咱們的angular sample項目中引入並使用咱們的組件庫了，使用組件庫就必需要npm安裝，這裏先不考慮npm，由於咱們的組件庫項目是依託這個angular sample項目的，因此咱們直接引入就行了，後面會講如何npm打包發佈。

4.1引入組件庫：

​

4.2 引入主題文件：

​

4.3 而後就可使用組件了，這裏先用建立組件庫時候的一個自動生成的組件爲例子，截圖以下：

​

​

​

能夠看到咱們的組件成功加載了，而且主題也加上去了，light和dark主題都work，剩下的就是如何使用主題，如何編寫依託主題的組件了。等等，咱們的angular sample項目若是要使用這些主題色配置呢，很簡單！在咱們的angular sample的app文件夾下面一樣新增一個theme的文件夾，下面新建一個_all-theme.scss文件，使用截圖以下：咱們能夠看到app component的主題也應用上去了，經過global定義的$theme傳入到_app-theme.scss文件中，而後在style.scss中@include進入，這樣咱們的angular sample就一樣使用了這一套主題了。這裏咱們使用的是預置的主題定義，能夠考慮一下，若是預置的不符合，咱們如何自定義一套主題色來符合項目的需求，這裏就不說了，自行思考。

​​​​

好了，到這裏基本上項目框架搭建完整，後面會一步步講解如何定義組件。

項目github地址：github.com/KevinZhang1…