首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Angular2学习教程之TemplateRef和ViewContainerRef详解

Posted in Javascript onMay 25, 2017

TemplateRef

在介绍 TemplateRef 前，我们先来了解一下 HTML 模板元素 - <template> 。模板元素是一种机制，允许包含加载页面时不渲染，但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。

在 HTML5 标准引入 template 模板元素之前，我们都是使用 <script> 标签进行客户端模板的定义，具体如下：

<script id="tpl-mock" type="text/template">
 <span>I am span in mock template</span>
</script>

对于支持 HTML5 template 模板元素的浏览器，我们可以这样创建客户端模板：

<template id="tpl">
 <span>I am span in template</span>
</template>

下面我们来看一下 HTML5 template 模板元素的使用示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"> <title>HTML5 Template Element Demo</title></head>
<body>
<h4>HTML5 Template Element Demo</h4>
<!-- Template Container -->
<div class="tpl-container"></div>
<!-- Template -->
<template id="tpl">
 <span>I am span in template</span>
</template>
<!-- Script -->
<script type="text/javascript">
 (function renderTpl() {
 if ('content' in document.createElement('template')) {
 var tpl = document.querySelector('#tpl');
 var tplContainer = document.querySelector('.tpl-container');
 var tplNode = document.importNode(tpl.content, true);
 tplContainer.appendChild(tplNode); 
 } else {
 throw new Error("Current browser doesn't support template element");
 }
 })();
</script>
</body>
</html>

以上代码运行后，在浏览器中我们会看到以下内容：

HTML5 Template Element Demo

I am span in template

而当我们注释掉 tplContainer.appendChild(tplNode) 语句时，刷新浏览器后看到的是：

HTML5 Template Element Demo

这说明页面中 <template> 模板元素中的内容，如果没有进行处理对用户来说是不可见的。Angular 2 中，<template> 模板元素主要应用在结构指令中，接下来我们先来介绍一下本文中的第一个主角 - TemplateRef：

import {Component, TemplateRef, ViewChild, AfterViewInit} from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
 <h1>Welcome to Angular World</h1>
 <template #tpl>
 <span>I am span in template</span>
 </template>
 `,
})
export class AppComponent {
 name: string = 'Semlinker';

 @ViewChild('tpl')
 tpl: TemplateRef<any>;

 ngAfterViewInit() {
 console.dir(this.tpl);
 }
}

上述代码运行后的控制台的输出结果如下：

Angular2学习教程之TemplateRef和ViewContainerRef详解

从上图中，我们发现 @Component template 中定义的 <template> 模板元素，渲染后被替换成 comment 元素，其内容为 "template bindings={}" 。此外我们通过 @ViewChild 获取的模板元素，是 TemplateRef_ 类的实例，接下来我们来研究一下 TemplateRef_ 类：

TemplateRef_

// @angular/core/src/linker/template_ref.d.ts
export declare class TemplateRef_<C> extends TemplateRef<C> {
 private _parentView;
 private _nodeIndex;
 private _nativeElement;
 constructor(_parentView: AppView<any>, _nodeIndex: number, _nativeElement: any);
 createEmbeddedView(context: C): EmbeddedViewRef<C>;
 elementRef: ElementRef;
}

TemplateRef

// @angular/core/src/linker/template_ref.d.ts
// 用于表示内嵌的template模板，能够用于创建内嵌视图(Embedded Views)
export declare abstract class TemplateRef<C> {
 elementRef: ElementRef;
 abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
}

(备注：抽象类与普通类的区别是抽象类有包含抽象方法，不能直接实例化抽象类，只能实例化该抽象类的子类)

我们已经知道 <template> 模板元素，渲染后被替换成 comment 元素，那么应该如何显示我们模板中定义的内容呢 ？我们注意到了 TemplateRef 抽象类中定义的 createEmbeddedView抽象方法，该方法的返回值是 EmbeddedViewRef 对象。那好我们马上来试一下：

import {Component, TemplateRef, ViewChild, AfterViewInit} from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
 <h1>Welcome to Angular World</h1>
 <template #tpl>
 <span>I am span in template</span>
 </template>
 `,
})
export class AppComponent {
 name: string = 'Semlinker';

 @ViewChild('tpl')
 tpl: TemplateRef<any>;

 ngAfterViewInit() {
 let embeddedView = this.tpl.createEmbeddedView(null);
 console.dir(embeddedView);
 }
}

上述代码运行后的控制台的输出结果如下：

Angular2学习教程之TemplateRef和ViewContainerRef详解

从图中我们可以知道，当调用 createEmbeddedView 方法后返回了 ViewRef_ 视图对象。该视图对象的 rootNodes 属性包含了 <template> 模板中的内容。在上面的例子中，我们知道了 TemplateRef 实例对象中的 elementRef 属性封装了我们的 comment 元素，那么我们可以通过 insertBefore 方法来创建我们模板中定义的内容。

import { Component, TemplateRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
 <h1>Welcome to Angular World</h1>
 <template #tpl>
 <span>I am span in template {{name}}</span>
 </template>
 `,
})
export class AppComponent {
 name: string = 'Semlinker';

 @ViewChild('tpl')
 tpl: TemplateRef<any>;

 ngAfterViewInit() {
 // 页面中的<!--template bindings={}-->元素
 let commentElement = this.tpl.elementRef.nativeElement;
 // 创建内嵌视图
 let embeddedView = this.tpl.createEmbeddedView(null);
 // 动态添加子节点
 embeddedView.rootNodes.forEach((node) => {
 commentElement.parentNode
  .insertBefore(node, commentElement.nextSibling);
 });
 }
}

成功运行上面的代码后，在浏览器中我们会看到以下内容：

Welcome to Angular World

I am span in template

现在我们来回顾一下，上面的处理步骤：

  • 创建内嵌视图(embedded view)
  • 遍历内嵌视图中的 rootNodes，动态的插入 node

虽然我们已经成功的显示出 template 模板元素中的内容，但发现整个流程还是太复杂了，那有没有简单地方式呢 ？是时候介绍本文中第二个主角 - ViewContainerRef。

ViewContainerRef

我们先来检验一下它的能力，然后再来好好地分析它。具体示例如下：

import { Component, TemplateRef, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
 <h1>Welcome to Angular World</h1>
 <template #tpl>
  <span>I am span in template</span>
 </template>
 `,
})
export class AppComponent {
 name: string = 'Semlinker';

 @ViewChild('tpl')
 tplRef: TemplateRef<any>;

 @ViewChild('tpl', { read: ViewContainerRef })
 tplVcRef: ViewContainerRef;

 ngAfterViewInit() {
 // console.dir(this.tplVcRef); (1)
 this.tplVcRef.createEmbeddedView(this.tplRef);
 }
}

移除上面代码中的注释，即可在控制台看到以下的输出信息：

Angular2学习教程之TemplateRef和ViewContainerRef详解

而在浏览器中我们会看到以下内容：

Welcome to Angular World

I am span in template

接下来我们来看一下 ViewContainerRef_ 类：

// @angular/core/src/linker/view_container_ref.d.ts
// 用于表示一个视图容器，可添加一个或多个视图
export declare class ViewContainerRef_ implements ViewContainerRef {
 ...
 length: number; // 返回视图容器中已存在的视图个数
 element: ElementRef;
 injector: Injector;
 parentInjector: Injector;
  // 基于TemplateRef创建内嵌视图，并自动添加到视图容器中，可通过index设置
 // 视图添加的位置
 createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, 
  index?: number): EmbeddedViewRef<C>;
 // 基 ComponentFactory创建组件视图
 createComponent<C>(componentFactory: ComponentFactory<C>,
  index?: number, injector?: Injector, projectableNodes?: any[][]): ComponentRef<C>;
 insert(viewRef: ViewRef, index?: number): ViewRef;
 move(viewRef: ViewRef, currentIndex: number): ViewRef;
 indexOf(viewRef: ViewRef): number;
 remove(index?: number): void;
 detach(index?: number): ViewRef;
 clear(): void;
}

通过源码我们可以知道通过 ViewContainerRef_ 实例，我们可以方便地操作视图，也可以方便地基于 TemplateRef 创建视图。现在我们来总结一下 TemplateRef 与 ViewContainerRef。

TemplateRef：用于表示内嵌的 template 模板元素，通过 TemplateRef 实例，我们可以方便创建内嵌视图(Embedded Views)，且可以轻松地访问到通过 ElementRef 封装后的 nativeElement。需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。

ViewContainerRef：用于表示一个视图容器，可添加一个或多个视图。通过 ViewContainerRef 实例，我们可以基于 TemplateRef 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

我有话说

1.Angular 2 支持的 View(视图) 类型有哪几种 ？

  • Embedded Views - Template 模板元素
  • Host Views - Component 组件

1.1 如何创建 Embedded View

ngAfterViewInit() {
 let view = this.tpl.createEmbeddedView(null);
}

1.2 如何创建 Host View

constructor(private injector: Injector,
 private r: ComponentFactoryResolver) {
 let factory = this.r.resolveComponentFactory(AppComponent);
 let componentRef = factory.create(injector);
 let view = componentRef.hostView;
}

2.Angular 2 Component 组件中定义的 <template> 模板元素为什么渲染后会被移除 ？

因为 <template> 模板元素，已经被 Angular 2 解析并封装成 TemplateRef 实例，通过 TemplateRef 实例，我们可以方便地创建内嵌视图(Embedded View)，我们不需要像开篇中的例子那样，手动操作 <template> 模板元素。

3.ViewRef 与 EmbeddedViewRef 之间有什么关系 ？

ViewRef 用于表示 Angular View(视图)，视图是可视化的 UI 界面。EmbeddedViewRef 继承于 ViewRef，用于表示 <template> 模板元素中定义的 UI 元素。

ViewRef

// @angular/core/src/linker/view_ref.d.ts
export declare abstract class ViewRef {
 destroyed: boolean;
 abstract onDestroy(callback: Function): any;
}

EmbeddedViewRef

// @angular/core/src/linker/view_ref.d.ts
export declare abstract class EmbeddedViewRef<C> extends ViewRef {
 context: C;
 rootNodes: any[]; // 保存<template>模板中定义的元素
 abstract destroy(): void; // 用于销毁视图
}

总结

Angular 2 中 TemplateRef 与 ViewContainerRef 的概念对于初学者来说会比较羞涩难懂，本文从基本的 HTML 5 <template> 模板元素开始，介绍了如何操作和应用页面中定义的模板。然后通过实例介绍了 Angular 2 中 TemplateRef 和 ViewContainerRef 的定义和作用。希望通过这篇文章，读者能更好的理解 TemplateRef 与 ViewContainerRef。

好了，以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

Angular2学习教程之TemplateRef和ViewContainerRef详解

- Author -

semlinker

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
Vue 嵌套路由使用总结（推荐）
Jan 13 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 #Javascript
vue-router实现webApp切换页面动画效果代码
May 25 #Javascript
Angular 2.x学习教程之结构指令详解
May 25 #Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 #Javascript
js获取一组日期中最近连续的天数
May 25 #Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 #Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 #Javascript
re模块(2) 事件调度器(1) cvzone(1) while(1) 分词器(1) 监听(2) okenizer(1) sched(1) 无限迭代(1) for(1)
You might like
PHP操作mysql函数详解，mysql和php交互函数
2011/05/19 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
利用VUE框架，实现列表分页功能示例代码
2017/01/12 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
前端常见跨域解决方案（全）
2017/09/19 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
小白教程|一小时上手最流行的前端框架vue（推荐）
2019/04/10 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
jQuery实现视频展示效果
2020/05/30 jQuery
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python判断设备是否联网的方法
2018/06/29 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
德国价格合理的品牌商品购物网站：averdo
2019/03/21 全球购物
员工工作及收入证明
2014/10/28 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs