详解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 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
js实现无缝轮播图效果
Mar 09 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导出CSV抽象类实例
2014/09/24 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
帝国cms目录结构分享
2015/07/06 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
javascript 获取图片颜色
2009/04/05 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python批量修改ssh密码的实现
2019/08/08 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
总经理助理职责
2014/02/04 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
优秀食品类广告词
2014/03/19 职场文书
甲午风云观后感
2015/06/02 职场文书
python开发制作好看的时钟效果
2022/05/02 Python