详解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 相关文章推荐
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
原生js实现轮播图特效
May 04 Javascript
详解javascript void(0)
Jul 13 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 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中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
python Django模板的使用方法(图文)
2013/11/04 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
python使用pil生成缩略图的方法
2015/03/26 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
高效使用Python字典的清单
2018/04/04 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
python GUI计算器的实现
2020/10/09 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
网络安全类面试题
2015/08/01 面试题
化学专业毕业生自荐信
2013/11/15 职场文书
小学生评语集锦
2014/04/18 职场文书
工商管理专业自荐信
2014/06/03 职场文书
2014年安全员工作总结
2014/11/13 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
总结高并发下Nginx性能如何优化
2021/11/01 Servers
MYSQL如何查看进程和kill进程
2022/03/13 MySQL