详解Angular 4.x NgTemplateOutlet

2024-02-22 16:48:02 43

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

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

NgTemplateOutlet指令语法

NgTemplateOutlet使用示例

@Component({
selector:'ng-template-outlet-example',
template:`






Hello
Hello{{name}}!
Ahoj{{person}}!
`
})
classNgTemplateOutletExample{
myContext={$implicit:'World',localSk:'Svet'};
}

基础知识

TemplateRef

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

ViewContainerRef

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

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

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

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

NgTemplateOutlet源码分析

NgTemplateOutlet指令定义

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

NgTemplateOutlet类私有属性及构造函数

exportclassNgTemplateOutletimplementsOnChanges{
//表示创建的内嵌视图
private_viewRef:EmbeddedViewRef;
//注入ViewContainerRef实例
constructor(private_viewContainerRef:ViewContainerRef){}
}

NgTemplateOutlet类输入属性

@Input()publicngTemplateOutletContext:Object;//用于设定EmbeddedViewRef上下文
@Input()publicngTemplateOutlet:TemplateRef;//用于设定TemplateRef对象

NgTemplateOutlet指令声明周期

exportclassNgTemplateOutletimplementsOnChanges{
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()方法的内部实现，可以参考Angular4.xNgIf文章中的相关内容。

另外需要注意的是使用let语法创建模板局部变量，若未设置绑定的值，则默认是上下文对象中$implicit属性对应的值。为什么属性名是$implicit呢？因为Angular不知道用户会如何命名，所以定义了一个默认的属性名。即let-name="$implicit"与let-name是等价的。

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

详解Angular 4.x NgTemplateOutlet

热门推荐

随机推荐