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有一段時間了，如果你也是，歡迎來交流。