你用Angular 嗎？

一.介紹

    說(shuō)說(shuō)封裝Angular 組建過(guò)程中遇見(jiàn)的一些問(wèn)題和感悟。用久了Angular,就會(huì)遇見(jiàn)很多坑，許多基于Angular開(kāi)發(fā)的框架最喜歡做的事情就是封裝組件，然后復(fù)用.....因?yàn)檫@是最省事的。

二.基本構(gòu)建組件思想

界面構(gòu)建草圖

  簡(jiǎn)要介紹上圖：

    1.View 就是我們需要完成的界面，但是界面無(wú)非就是由若干個(gè)label,button,table,img,list等一些基本控件構(gòu)成的，所有的前端頁(yè)面構(gòu)成都是一樣，只是加上CSS排版確定最后的顯示效果。

    2.五種基類(lèi)，其實(shí)不止五種，只是列舉。這里就需要我們將基類(lèi)都封裝成組件的形式，對(duì)外提供組件標(biāo)簽就可以使用。不管構(gòu)建多少個(gè)頁(yè)面，都可以用這幾個(gè)基本組件完成。

  eg：一個(gè)button組件

button.component.html

  這個(gè)Button組件里面是還包裹一個(gè)label組件的。

button.component.ts

  對(duì)外只用提供選擇器，就可以使用Button了。

3.可是為什么還要有中間的UIbuileder呢？

是這樣的，每次引選擇器名是不是也很麻煩，看起來(lái)沒(méi)有省力多少，

封裝的基本組件只需要對(duì)外拋出一個(gè)TYPEID，UIbuilder只要知道1是代表button組件，2代表label組件，UIbuilder將組件構(gòu)建出來(lái)。

UIBuilder.html 構(gòu)建組建圖

  VIEW界面需要Button給我傳一個(gè)1，需要label傳一個(gè)2，需要什么傳對(duì)于的id就行。此時(shí)的界面和組件是完全分離的，這樣構(gòu)件界面的時(shí)候幾乎可以沒(méi)有代碼就出來(lái)一個(gè)頁(yè)面啦。而且下次用的時(shí)候，基類(lèi)是完全不用動(dòng)的。

三.樣式控制。

也許你會(huì)覺(jué)得這樣構(gòu)件出來(lái)的只有最簡(jiǎn)單的頁(yè)面，那么樣式呢？

的確呀，這樣就是很老土的界面，那么樣式要怎么實(shí)現(xiàn)呢？

其實(shí)Angular 提供了很多的方法的。

1.一張樣式表，定義所有的樣式。相當(dāng)于boostrap一樣。

button樣式定義

  都知道{{}}的定義，你只要在最外面將你需要的樣式名傳進(jìn)來(lái)就可以啦。

2.代碼修改樣式

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

代碼修改樣式

    這種都是可以在外部修改樣式的，你的基組件不需要改動(dòng)。

    可能看起來(lái)費(fèi)勁，但用起來(lái)好處很多，不用copy，copy了，而且你的思想也會(huì)到一個(gè)新的境界。

  其實(shí)，我用Angular有一段時(shí)間了，如果你也是，歡迎來(lái)交流。