该指令用于基于已有的 TemplateRef
对象,插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时,我们可以通过 [ngTemplateOutletContext]
属性来设置 EmbeddedViewRef
的上下文对象。绑定的上下文应该是一个对象,此外可通过 let
语法来声明绑定上下文对象属性名。
友情提示:若 let 语法未绑定任何属性名,则上下文对象中 $implicit 属性,对应的值将作为默认值。
NgTemplateOutlet 指令语法
NgTemplateOutlet 使用示例
基础知识
TemplateRef
TemplateRef 实例用于表示模板对象。
ViewContainerRef
ViewContainerRef 实例提供了 createEmbeddedView()
方法,该方法接收 TemplateRef
对象作为参数,并将模板中的内容作为容器 (comment 元素) 的兄弟元素,插入到页面中。
*
语法糖的结构指令,最终都会转换为
模板指令,模板内的内容如果不进行处理,是不会在页面中显示。
若想进一步了解
NgTemplateOutlet 源码分析
NgTemplateOutlet 指令定义
NgTemplateOutlet 类私有属性及构造函数
;
// 注入ViewContainerRef实例
constructor(private _viewContainerRef: ViewContainerRef) {}
}
NgTemplateOutlet 类输入属性
; // 用于设定TemplateRef对象
NgTemplateOutlet 指令声明周期
ngTemplateOutlet
指令的源码相对比较简单,如果读者有兴趣了解 createEmbeddedView()
方法的内部实现,可以参考 文章中的相关内容。
另外需要注意的是使用 let
语法创建模板局部变量,若未设置绑定的值,则默认是上下文对象中 $implicit
属性对应的值。为什么属性名是 $implicit
呢?因为 Angular 不知道用户会如何命名,所以定义了一个默认的属性名。 即 let-name="$implicit"
与 let-name
是等价的。