详解Angular 4.x NgTemplateOutlet

该指令用于基于已有的 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) {}}