Angular 4 自定義組件封裝碰見的一些事兒

你用Angular 嗎？

一.介紹

    說說封裝Angular 組建過程當中碰見的一些問題和感悟。用久了Angular,就會碰見不少坑，許多基於Angular開發的框架最喜歡作的事情就是封裝組件，而後複用.....由於這是最省事的。

二.基本構建組件思想

界面構建草圖

  簡要介紹上圖：

    1.View 就是咱們須要完成的界面，可是界面無非就是由若干個label,button,table,img,list等一些基本控件構成的，全部的前端頁面構成都是同樣，只是加上CSS排版肯定最後的顯示效果。

    2.五種基類，其實不止五種，只是列舉。這裏就須要咱們將基類都封裝成組件的形式，對外提供組件標籤就可使用。無論構建多少個頁面，均可以用這幾個基本組件完成。

  eg：一個button組件

button.component.html

  這個Button組件裏面是還包裹一個label組件的。

button.component.ts

  對外只用提供選擇器，就可使用Button了。

3.但是爲何還要有中間的UIbuileder呢？

是這樣的，每次引選擇器名是否是也很麻煩，看起來沒有省力多少，

封裝的基本組件只須要對外拋出一個TYPEID，UIbuilder只要知道1是表明button組件，2表明label組件，UIbuilder將組件構建出來。

UIBuilder.html 構建組建圖

  VIEW界面須要Button給我傳一個1，須要label傳一個2，須要什麼傳對於的id就行。此時的界面和組件是徹底分離的，這樣構件界面的時候幾乎能夠沒有代碼就出來一個頁面啦。並且下次用的時候，基類是徹底不用動的。

三.樣式控制。

也許你會以爲這樣構件出來的只有最簡單的頁面，那麼樣式呢？

的確呀，這樣就是很老土的界面，那麼樣式要怎麼實現呢？

其實Angular 提供了不少的方法的。

1.一張樣式表，定義全部的樣式。至關於boostrap同樣。

button樣式定義

  都知道{{}}的定義，你只要在最外面將你須要的樣式名傳進來就能夠啦。

2.代碼修改樣式

  ElementRef ，Renderer2  有多少人知道這兩個屬性的。

代碼修改樣式

    這種都是能夠在外部修改樣式的，你的基組件不須要改動。

    可能看起來費勁，但用起來好處不少，不用copy，copy了，並且你的思想也會到一個新的境界。

  其實，我用Angular有一段時間了，若是你也是，歡迎來交流。