Angular : NgComponentOutlet And NgTemplateOutlet

在上一篇文章中，我們使用ComponentFactoryResolver動態產生Component。
今天我們來介紹ngComponentOutlet這個Directive，它的使用方式比ComponentFactoryResolver簡單許多，可以更輕鬆容易地達成動態產生Component的工作。
ngComponentOutlet的使用方式如下:

<ng-container *ngComponentOutlet="YourComponentType;
                  injector: YourInjector;
                  content:  YourContent;
                  ngModuleFactory: YourModuleFactory;">
</ng-container>

※除了指定嵌入的Component Type，還有其他Input 選項，如injector 、content、ngModuleFactory。
※injector : 當Component 需要使用到服務時，需配合ReflectiveInjector做注入的動作。
※content : 當Component有用到<ng-content>時，這個欄位可以被用來插入要顯示在<ng-content> 的內容。
※ngModuleFactory : 當Component 來自其他Module 時，需配合NgModuleFactory和Compiler做載入的動作。

如果我們拿上一篇文章的例子以ngComponentOutlet來改寫的話會變成這樣:

<div *ngFor="let note of NoteComponents">
   <ng-container *ngComponentOutlet="note">
   </ng-container>
</div>

看起來是不是比ComponentFactoryResolver還要更加簡潔和簡單!!

另外，如果我們今天要嵌入的是一個Template而不是Component ，那我們就會使用到ngTemplateOutlet這個Directive，其範例如下:

 
<ng-container *ngTemplateOutlet="week"></ng-container>
<ng-template #week>
 <ul>
　   <li>星期一</li>
　   <li>星期二</li>
　   <li>星期三</li>
     <li>星期四</li>
     <li>星期五</li>
     <li>星期六</li>
     <li>星期日</li>
 </ul>
</ng-template>

看完了上面範例是不是覺得跟ngComponentOutlet一樣簡單!