ViewContainerRef

標籤 (共 3 篇文章)

[Angular 大師之路] 在動態的 HTML 中動態產生元件

在之前的文章中我們曾經提到過「動態建立元件」的方法,透過建立一個 directive,並決定這個 directive 的樣版上要呈現成什麼元件,之後將元件產生在 directive 所屬的樣版上。

這麼做很棒,不過還是有一個缺點,就是一定需要在樣板 HTML 上掛上這個 directive,才能產生動態的元件,雖然大部分情境都足夠了,但當遇到甚至連 HTML 都是完全自定義不是寫死在程式內的,如果需要由後端 API 回傳 HTML 內容,並在回傳的 HTML 特定位置放置元件,就會有困難。

今天就來看看這種動態的 HTML 內如何插入一個元件!

繼續閱讀
[Angular 大師之路] 動態載入元件 (複雜版)

昨天我們介紹了使用 *ngComponentOutlet 的方法來動態產生元件,其實它是一個使用 ViewContainerRef 來顯示不同內容的行為,因此我們也可以不透過樣板語法的方式,改成自行在程式中產生元件實體後方到畫面上;今天我們就稍微深入的來看看比較複雜的方式來動態載入元件吧!

繼續閱讀
[Angular 進階議題]使用ComponentFactoryResolver動態產生Component

Angular提供了ComponentFactoryResolver,來協助我們在程式中動態的產生不同的Component,而不用死板板的把所有的Component都寫到View裡面,再判斷是否要顯示某個Component,當遇到呈現方式比較複雜的需求時非常好用,寫出來的程式碼也會漂亮很多。今天就來看看如何透過ComponentFactoryResolver來動態產生需要的Component。

繼續閱讀