详解Angular模板引用变量及其作用域


Posted in Javascript onNovember 23, 2018

Angular模板引用变量

如果你曾经参与过Angular项目的开发,那么你可能一眼就会看出谁将是本文的主角:

<input type="text" [value]="value" #name>

若你对此陌生,也无须在意。示例代码的<input>标签的属性中存在一个画风明显与其他属性不同的家伙——#name,这种以一个#开头命名,被附加在DOM元素上的属性,被称为模板引用变量(template reference variables)。

那么何为模板引用变量呢?文档是这样描述的:

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

模板引用变量可以是Angualr模板中的DOM元素、Angular组件(指令),甚至Web组件的引用,而它具体是什么,则取决于它所依附的元素(不使用指令进行干预时)。如前文示例代码中的模板引用变量name就是<input>这一DOM元素的引用。

既然模板引用变量是模板中某一元素的引用,那理所当然地我们便可以通过这个引用变量" 触及 "该模板元素的" 实体 "。这在实际地开发中是十分实用的,考虑以下代码:

<app-component #component [input]="variable"></app-component>
{{ component.input }}
{{ component.func() }}

通过模板引用变量我们获得了app-component组件的实例引用,这使得我们可以轻松地在模板中访问app-component组件内部的成员。在某些情境下,这种能力给我们的开发提供了很大的助力。

模板引用变量的作用域

You can refer to a template reference variable anywhere in the template.

在文档中,官方毫不含糊地向我们表示:模板引用变量可以在模板中的任何地方使用。最骚的是,“任何地方”还被特别加粗。我们在大多数的时候,并不会对这句话产生疑问,但也许某天你会怀疑这个anywhere是否真实。有如下的代码:

<app-card>
  <ng-template #body>
    <app-component #component [input]="variable"></app-component>
  </ng-template>
  <ng-template #footer>
    {{component.input}}
  </ng-template>
</app-card>

当代码运行后,我们将会在控制台看到这样的错误提示:

TypeError: Cannot read property 'input' of undefined

为什么component会是undefined?

答案其实很明显,模板引用对象可以在模板中的任何地方使用,但此例中component的定义与使用却并不在一个template中。文档中所描述的 template 并不能直接与 组件的模板文件 划上等号。当我们使用ng-template时,会在当前模板的内部再建立一个新的模板,它的内部无法直接被外部模板触及,因此示例中的component.input自然会引起错误。

当 template 的定义明确以后,一切都是如此简单:模板引用变量存在作用域,其作用域是它所处的 template,而非它所在的模板文件,同时它可以在其作用域内的任何地方被使用。

最后,我们再看一个例子:

<div *ngIf="true">
  <app-component #component [input]="variable"></app-component>
</div>
{{component.input}}

当这段代码运行后,我们依旧会在控制台看到:

TypeError: Cannot read property 'input' of undefined

至于背后的原因,我便作为小小的悬念留给大家,由大家自己去了解。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 #Javascript
详解Vue2.0组件的继承与扩展
Nov 23 #Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 #Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 #Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 #Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 #Javascript
vue全局使用axios的方法实例详解
Nov 22 #Javascript
You might like
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
php 函数中使用static的说明
2012/06/01 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
跟老齐学Python之Import 模块
2014/10/13 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
英文商务邀请函范文
2015/01/31 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers