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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容