详解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 NgTemplateOutletimplements OnChanges {
// 表示创建的内嵌视图
private _viewRef: EmbeddedViewRef<any>;
// 注入ViewContainerRef实例
constructor(private _viewContainerRef: ViewContainerRef) {}
}

NgTemplateOutlet类输入属性

@Input() public ngTemplateOutletContext: Object; // 用于设定EmbeddedViewRef上下文
@Input() public ngTemplateOutlet: TemplateRef<any>; // 用于设定TemplateRef对象

NgTemplateOutlet指令声明周期

export class NgTemplateOutletimplements OnChanges {
ngOnChanges(changes: SimpleChanges) {
// 若this._viewRef已存在，则先从视图容器中对应的位置移除该视图。
if (this._viewRef) {
this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
}
// 若this.ngTemplateOutlet输入属性有绑定TemplateRef对象，则基于设定的上下文对象创建内嵌视图
if (this.ngTemplateOutlet) {
this._viewRef = this._viewContainerRef.createEmbeddedView(
this.ngTemplateOutlet, this.ngTemplateOutletContext);
}
}
}

ngTemplateOutlet

指令的源码相对比较简单，如果读者有兴趣了解

createEmbeddedView()

方法的内部实现，可以参考 Angular 4.x NgIf 文章中的相关内容。

另外需要注意的是使用

let

语法创建模板局部变量，若未设置绑定的值，则默认是上下文对象中

$implicit

属性对应的值。为什么属性名是

$implicit

呢？因为 Angular 不知道用户会如何命名，所以定义了一个默认的属性名。 即

let-name="$implicit"

与

let-name

是等价的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• Angular2学习教程之TemplateRef和ViewContainerRef详解
• Angular.JS中的指令引用template与指令当做属性详解
• AngularJS延迟加载html template
• Angular中的ng-template及angular 使用ngTemplateOutlet指令的方法