該指令用于基于已有的 TemplateRef 對象，插入對應的內嵌視圖。在應用 NgTemplateOutlet 指令時，我們可以通過 [ngTemplateOutletContext] 屬性來設置 EmbeddedViewRef 的上下文對象。綁定的上下文應該是一個對象，此外可通過 let 語法來聲明綁定上下文對象屬性名。

友情提示：若 let 語法未綁定任何屬性名，則上下文對象中 $implicit 屬性，對應的值將作為默認值。

NgTemplateOutlet 指令語法

代碼如下:
<ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>

NgTemplateOutlet 使用示例

@Component({ selector: 'ng-template-outlet-example', template: ` <ng-container *ngTemplateOutlet="greet"></ng-container> <hr> <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container> <hr> <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container> <hr> <ng-template #greet><span>Hello</span></ng-template> <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template> <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>`})class NgTemplateOutletExample { myContext = {$implicit: 'World', localSk: 'Svet'};}

基礎知識

TemplateRef

TemplateRef 實例用于表示模板對象。

ViewContainerRef

ViewContainerRef 實例提供了 createEmbeddedView() 方法，該方法接收 TemplateRef 對象作為參數，并將模板中的內容作為容器 (comment 元素) 的兄弟元素，插入到頁面中。

<ng-template>

<ng-template> 用于定義模板，使用 * 語法糖的結構指令，最終都會轉換為 <ng-template> 模板指令，模板內的內容如果不進行處理，是不會在頁面中顯示。

<ng-container>

<ng-container> 是一個邏輯容器，可用于對節點進行分組，但不作為 DOM 樹中的節點，它將被渲染為 HTML中的 comment 元素，它可用于避免添加額外的元素來使用結構指令。

若想進一步了解 <ng-template> 與 <ng-container> 的區別，請參考Angular 4.x 動態創建組件 文章中我有話說版塊。

NgTemplateOutlet 源碼分析

NgTemplateOutlet 指令定義

@Directive({ selector: '[ngTemplateOutlet]'})

NgTemplateOutlet 類私有屬性及構造函數

export class NgTemplateOutlet implements OnChanges { // 表示創建的內嵌視圖 private _viewRef: EmbeddedViewRef<any>;  // 注入ViewContainerRef實例 constructor(private _viewContainerRef: ViewContainerRef) {}}