详解Angular 4.x NgTemplateOutlet


Posted in Javascript onMay 24, 2017

该指令用于基于已有的 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 是等价的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
javascript简单写的判断电话号码实例
May 24 #Javascript
Angular2搜索和重置按钮过场动画
May 24 #Javascript
深入理解react-router@4.0 使用和源码解析
May 23 #Javascript
angularjs中ng-bind-html的用法总结
May 23 #Javascript
vue.js实现价格格式化的方法
May 23 #Javascript
js编写选项卡效果
May 23 #Javascript
jQuery日期范围选择器附源码下载
May 23 #jQuery
You might like
php smarty的预保留变量总结
2008/12/04 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Django自定义manage命令实例代码
2018/02/11 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
成教自我鉴定
2013/10/27 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
医学生自我评价
2014/01/27 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
企业文化口号
2014/06/12 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
小学生思想品德评语
2014/12/31 职场文书
秋菊打官司观后感
2015/06/03 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
python多线程方法详解
2022/01/18 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers