详解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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
canvas 中如何实现物体的框选
Aug 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
递归列出所有文件和目录
2006/10/09 PHP
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php经典趣味算法实例代码
2020/01/21 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
理解JS事件循环
2016/01/07 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
python调用私有属性的方法总结
2020/07/24 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
电大自我鉴定范文
2013/10/01 职场文书
工程力学专业毕业生求职信
2013/10/06 职场文书
军训感想500字
2014/02/20 职场文书
品质口号大全
2014/06/17 职场文书
关爱留守儿童标语
2014/06/18 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书