详解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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
基于JS实现视频上传显示进度条
May 12 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
Python中的面向对象编程详解(下)
2015/04/13 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python解析含有重复key的json方法
2019/01/22 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
专业销售业务员求职信
2013/11/18 职场文书
后勤主管岗位职责
2014/03/01 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
人民调解协议书范本
2014/10/11 职场文书
酒店员工管理制度
2015/08/05 职场文书
中学团支部工作总结
2015/08/13 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
MySQL基础(二)
2021/04/05 MySQL
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android