新聞中心
源碼:https://github.com/Karin001/ngx-dynamic-form
動(dòng)態(tài)表單使用場(chǎng)景
有時(shí)候我們需要一個(gè)靈活的表單,這個(gè)表單可以根據(jù)用戶的選擇,或者服務(wù)器返回的信息進(jìn)行重新配置,比如:增加或刪除一組input元素、一組select元素,等等。
在這樣的情況下,如果一開始就在模板里寫下所有的表單,利用一個(gè)ngif樹狀結(jié)構(gòu)進(jìn)行選擇控制,程序會(huì)變得比較冗余。
這時(shí)。程序最好是能夠根據(jù)用戶的選擇(driven by configuration)或者服務(wù)器的響應(yīng),自動(dòng)生成所需要的表單。這就是動(dòng)態(tài)表單要處理的業(yè)務(wù)。
組件生成的相關(guān)概念組件的兩個(gè)構(gòu)成
要?jiǎng)討B(tài)生成表單,需要先理解組件是如何生成的。
一個(gè)angular組件由兩部分所組成。
Wrapper
Wrapper能夠與組件進(jìn)行交互,當(dāng)一個(gè)Wrapper初始化完成后,就已經(jīng)幫我們實(shí)例化了一個(gè)組件。同時(shí),它也負(fù)責(zé)組件的change detection,以及觸發(fā)鉤子函數(shù)比如ngOnInit,ngOnChanges。
View
View負(fù)責(zé)呈現(xiàn)渲染過后的模板,將組件的外貌展示出來,并且能夠觸發(fā)Wrapper的change detection。一個(gè)組件可以有多個(gè)view,每一個(gè)view可以通過調(diào)用angular提供的兩個(gè)函數(shù)自行生成和銷毀,這個(gè)過程不用頂層的視圖參與。
組件的通常加載方式(非動(dòng)態(tài)加載方式)
通常情況下,我們都是把組件內(nèi)嵌到根組件或者另一個(gè)組件當(dāng)中使用。嵌入的組件稱為子組件,被嵌入的稱為父組件。這時(shí),當(dāng)我們的子組件代碼在被編譯時(shí),會(huì)生成一個(gè)組件工廠component factory(這是angular核心類ComponentFactory的一個(gè)實(shí)例),和一個(gè)hsot view,host view負(fù)責(zé)本組件在父組件視圖內(nèi)生成該組件的dom節(jié)點(diǎn),以及生成該組件的wrapper和view。
動(dòng)態(tài)加載組件
而當(dāng)我們想要將一個(gè)動(dòng)態(tài)組件插入某個(gè)組件視圖時(shí),則無法取得這個(gè)動(dòng)態(tài)組件的實(shí)例,因?yàn)檫@些是非動(dòng)態(tài)組件編譯器做的事。
實(shí)現(xiàn)動(dòng)態(tài)組件
angular提供了一些函數(shù)解決上面的難題,要使用這些函數(shù)我們需要注入兩個(gè)對(duì)象。
constructor( private componentFactoryResolver: ComponentFactoryResolver, private viewcontainerRef: ViewContainerRef, ) { }
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前文章:angular動(dòng)態(tài)表單制作-創(chuàng)新互聯(lián)
分享鏈接:http://fisionsoft.com.cn/article/dcsohh.html