這篇文章主要介紹Angular如何根據(jù)組件名稱動(dòng)態(tài)創(chuàng)建組件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括察布查爾錫伯網(wǎng)站建設(shè)、察布查爾錫伯網(wǎng)站制作、察布查爾錫伯網(wǎng)頁(yè)制作以及察布查爾錫伯網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，察布查爾錫伯網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到察布查爾錫伯省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一、理解angular組件

組件是一種特殊的指令，使用更簡(jiǎn)單的配置項(xiàng)來(lái)構(gòu)建基于組件的應(yīng)用程序架構(gòu)，這樣他能簡(jiǎn)單地寫app，通過(guò)類似的web Component 或者angular2的樣式。web Component 是一個(gè)規(guī)范。馬上就要成為標(biāo)準(zhǔn)。

應(yīng)用組件的優(yōu)點(diǎn)：

• 比普通指令配置還簡(jiǎn)單

• 提供更好的默認(rèn)設(shè)置和最好的實(shí)踐

• 對(duì)基于組建的應(yīng)用架構(gòu)更優(yōu)化。

• 對(duì)angular2的升級(jí)更平滑。

不用組建的情況:

• 對(duì)那些在 compile或者pre-link階段要執(zhí)行操作的指令，組件不能用，因?yàn)闊o(wú)法到達(dá)那個(gè)階段。

• 如果你想定義指令的 priority，terminal，multi-element，也不能用。

• 組件只能通過(guò)元素標(biāo)簽觸發(fā)，其他的只能用命令。

二、動(dòng)態(tài)創(chuàng)建組件

• 說(shuō)說(shuō)場(chǎng)景先，比我寫了一些組件，這此組件內(nèi)容都很少，彈出的對(duì)話框也許只有一行數(shù)據(jù)，也有可能是一個(gè)表單等，或都一些多選的，單選的選項(xiàng)等。

• 網(wǎng)上有好多，動(dòng)態(tài)創(chuàng)建組件的Demo，都不是很滿意，愿意就是要?jiǎng)討B(tài)創(chuàng)建組件的時(shí)候，傳入的你即將要?jiǎng)?chuàng)建的組件對(duì)象進(jìn)去，然后把這個(gè)放到頁(yè)面里顯示出來(lái)。這算什么動(dòng)態(tài)創(chuàng)建呀，我就想傳一個(gè)組件的名字，然后就能把他創(chuàng)建出來(lái)。

• 之前寫過(guò)C#動(dòng)態(tài)創(chuàng)建類，都是給一個(gè)類的名稱，然后通過(guò)反射將類創(chuàng)建出來(lái)，然后能過(guò)接口過(guò)濾轉(zhuǎn)成接口調(diào)用方法或， invoke 某個(gè)方法等進(jìn)行操作。像這種才是我想要的效果。

• 給個(gè)名稱，然后就把這個(gè)組件創(chuàng)建出來(lái)，通過(guò)輸入一些參數(shù)對(duì)創(chuàng)建出來(lái)的組件進(jìn)行賦值，輸出一些參數(shù)（主就輸出是事件了，比較點(diǎn)擊組件上的按鈕觸發(fā)相應(yīng)的事件等）。

說(shuō)了這么多，先來(lái)個(gè)例子吧。

上面那張圖很簡(jiǎn)單就是一個(gè)輸入文本的一個(gè)彈框。

下面這個(gè)就有點(diǎn)復(fù)雜了，有數(shù)據(jù)傳入，事件綁定等

主了調(diào)用起來(lái)方便，我把這些都封裝成了一個(gè)方法：三個(gè)參數(shù)

• 要?jiǎng)?chuàng)建的組件名稱

• 要傳入組件的參數(shù)

• 組件輸出的事件

 Utility.$ShowDialogComponent('ComponentName', {
  Params1,Params2...
 }, {
  onEventName1:()=>{},
  ...
 });

由于我動(dòng)態(tài)創(chuàng)建的組件都是以彈框形式出來(lái)，所以我把動(dòng)態(tài)創(chuàng)建的步驟放到了，彈框組件里。

創(chuàng)建Dialog.ts，文件，

@Component({
 selector: 'xtn-mode-dialog',
 templateUrl: './Dialog.html',
 styleUrls: ['./Dialog.scss'],
 animations: [ // 彈框的添加一個(gè)動(dòng)畫效果，由小到大顯示，關(guān)閉時(shí)候，由大小到最后不見了。
 trigger('TriggerState', [
  state('inactive', style({ transform: 'scale(0.1)' })),
  state('active', style({ transform: 'scale(1)' })),
  transition('inactive => active', animate('150ms ease-in')),
  transition('active => inactive', animate('150ms ease-out')),
 ])
 ]
})
export class XtnDialog implements OnInit, OnDestroy, OnChanges, AfterContentChecked, AfterContentInit {
 // 依賴注入動(dòng)態(tài)創(chuàng)建組件的工廠類
 constructor(private resolver: ComponentFactoryResolver) {
 }
 // 內(nèi)容檢查，主要是判斷是打開還是關(guān)閉彈框。
 ngAfterContentChecked(): void {}
 // 銷毀操作
 ngOnDestroy(): void {}
 // 這里就是動(dòng)態(tài)創(chuàng)建的組件地方法
 LoadComponent(self:any){}
 ngAfterContentInit(): void {}
 ....
}

以上是“Angular如何根據(jù)組件名稱動(dòng)態(tài)創(chuàng)建組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+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)景需求。

分享文章：Angular如何根據(jù)組件名稱動(dòng)態(tài)創(chuàng)建組件-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/dcsdes.html