详解Angular 4.x NgTemplateOutlet

详解Angular 4.x NgTemplateOutlet

该指令用于基于已有的 TemplateRef 对象，插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时，我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。绑定的上下文应该是一个对象，此外可通过 let 语法来声明绑定上下文对象属性名。

友情提示：若 let 语法未绑定任何属性名，则上下文对象中 $implicit 属性，对应的值将作为默认值。

NgTemplateOutlet 指令语法

复制代码 代码如下:

NgTemplateOutlet 使用示例

@Component({

selector: 'ng-template-outlet-example',

template: `

Hello

Hello {{name}}!

Ahoj {{person}}!

`

})

class NgTemplateOutletExample {

myContext = {$implicit: 'World', localSk: 'Svet'};

}

基础知识

TemplateRef

TemplateRef 实例用于表示模板对象。

ViewContainerRef

ViewContainerRef 实例提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。

用于定义模板，使用 * 语法糖的结构指令，最终都会转换为 模板指令，模板内的内容如果不进行处理，是不会在页面中显示。

是一个逻辑容器，可用于对节点进行分组，但不作为 DOM 树中的节点，它将被渲染为 HTML中的 comment 元素，它可用于避免添加额外的元素来使用结构指令。

若想进一步了解 与 的区别，请参考Angular 4.x 动态创建组件 文章中我有话说版块。

NgTemplateOutlet 源码分析

NgTemplateOutlet 指令定义

@Directive({

selector: '[ngTemplateOutlet]'

})

NgTemplateOutlet 类私有属性及构造函数

export class NgTemplateOutlet implements OnChanges {

// 表示创建的内嵌视图

private _viewRef: EmbeddedViewRef;

// 注入ViewContainerRef实例

constructor(private _viewContainerRef: ViewContainerRef) {}

}

NgTemplateOutlet 类输入属性

@Input() public ngTemplateOutletContext: Object; // 用于设定EmbeddedViewRef上下文

@Input() public ngTemplateOutlet: TemplateRef; // 用于设定TemplateRef对象

NgTemplateOutlet 指令声明周期

export class NgTemplateOutlet implements 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 是等价的。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。