详解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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JS图片预加载插件详解
Jun 21 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
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的SQL注入过程分析
2012/01/06 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
python多重继承实例
2014/10/11 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python的log日志功能及设置方法
2019/07/11 Python
python批量解压zip文件的方法
2019/08/20 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
python音频处理的示例详解
2020/12/23 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
后勤岗位职责
2013/11/26 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
治超工作实施方案
2014/05/04 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python