详解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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
vue-dialog的弹出层组件
May 25 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
javascript实现智能手环时间显示
Sep 18 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
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
JS location几个方法小姐
2008/07/09 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
jquery插件之easing使用
2010/08/19 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
深入理解React高阶组件
2017/09/28 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python创建关联数组(字典)的方法
2015/05/04 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python numpy库np.percentile用法说明
2020/06/08 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
财务情况说明书范文
2014/05/06 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
幼儿园语言教学反思
2016/02/23 职场文书