详解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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 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
Zerg建筑一览
2020/03/14 星际争霸
优化PHP代码技巧的小结
2013/06/02 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
PHP7 foreach() 函数修改
2021/03/09 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
求职信模版
2013/11/30 职场文书
师范大学生求职信
2014/06/13 职场文书
简易版租房协议书范本
2014/10/13 职场文书
廉政承诺书2015
2015/04/28 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
综治目标管理责任书
2015/05/11 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
关于职业道德的心得体会
2016/01/18 职场文书