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

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

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

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

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