详解Angular 4.x NgTemplateOutlet

前端之家收集整理的这篇文章主要介绍了详解Angular 4.x NgTemplateOutlet前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

NgTemplateOutlet 指令语法

代码如下:

NgTemplateOutlet 使用示例




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

基础知识

TemplateRef

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

ViewContainerRef

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

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

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

若想进一步了解

的区别,请参考 文章中我有话说版块。

NgTemplateOutlet 源码分析

NgTemplateOutlet 指令定义

NgTemplateOutlet 类私有属性及构造函数

; // 注入ViewContainerRef实例 constructor(private _viewContainerRef: ViewContainerRef) {} }

NgTemplateOutlet 类输入属性

; // 用于设定TemplateRef对象

NgTemplateOutlet 指令声明周期

ngTemplateOutlet 指令的源码相对比较简单,如果读者有兴趣了解 createEmbeddedView() 方法的内部实现,可以参考 文章中的相关内容

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

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

猜你在找的JavaScript相关文章