详解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 NgTemplateOutlet implements 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 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
是等价的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 【推荐】C#线程篇---你所不知道的线程池(4)
- 洛谷P1333 瑞瑞的木棍(欧拉回路)
- 【推荐】C#线程篇---Task(任务)和线程池不得不说的秘密(5.1)
- 【LeetCode 20】关关的刷题日记45 – Valid Parenthese
- 1819: [JSOI]Word Query电子字典
- 【推荐】C#线程篇---Task(任务)和线程池不得不说的秘密(5.2)
- javascript 事件基础
- 算法模板——sap网络最大流 3(递归+邻接矩阵)
- 从Hash Killer I、II、III论字符串哈希
- angularjs 缓存详解
- 算法模板——线段树7(骰子翻转问题)
- 2729: [HNOI2012]排队
- 算法模板——sap网络最大流 2(非递归+邻接表)
- 算法模板——sap网络最大流 1(非递归+邻接矩阵)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 异步神器CompletableFuture
- IoT安全测试指北
- Kubernetes 故障解决心得(一)
- Kubernetes 临时存储需要限制吗?
- PHP安全:变量的前世今生
- 如何使用ParamSpider在Web文档中搜索敏感参数
- Spring 的 Controller 是单例还是多例?怎么保证并发的安全
- 《剑指offer》第28天:最长上升子序列(高频)
- 《剑指offer》第27天:三角形最小路径和
- 《剑指offer》第26天:最大子序和
- Threat Dragon:一款针对OWASP的威胁模型构建平台
- 《剑指offer》第25天:最简单的动态规划
- 基于web页面开发串口程序界面---html代码
- Debotnet:一款针对Windows10隐私设置和数据的保护工具
- 基于web页面开发串口程序界面---代码实现