Angular应用里的Template Reference变量
时间:2022-07-24
本文章向大家介绍Angular应用里的Template Reference变量,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Angular应用里的Template Reference Variable,模板引用变量,用于创建一个对模板里DOM元素或者Angular指令的引用。
使用#号定义一个模板引用变量。
看个具体的例子:
<input #phone placeholder=“phone number” />
定义了一个phone变量,指向input html元素。
在Component html模板的任意地方,都可以直接访问模板引用变量。
<input #phone placeholder="phone number" />
<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
- If you declare the variable on a component, the variable refers to the component instance.
- If you declare the variable on a standard HTML tag, the variable refers to the element.
- If you declare the variable on an element, the variable refers to a TemplateRef instance, which represents the template.
- If the variable specifies a name on the right-hand side, such as #var=“ngModel”, the variable refers to the directive or component on the element with a matching exportAs name.
模板引用变量的生命周期是整个模板,这一点同模板输入变量,比如*ngFor里的(let phone)不同,因此需要注意命名冲突。
除了#之外,另一种等价的语法是ref-fax,相当于#ref.
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 算法题:输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字
- 使用Java和Python解题:定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1))。
- R语言中%||%是什么意思?
- 原创 | 你会用缓存吗?详解LRU缓存淘汰算法
- 用Java实现:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。
- Hacking with iOS: SwiftUI Edition - Hot Prospects项目(一)
- 原创 | 详解command设计模式,解耦操作和回滚
- 第32天:图解大数打印,这道题如此经典!
- Mac终端配置好的环境变量在关闭终端后失效怎么办
- R中的stack和unstack函数
- 第33期:上海自来水来自海上,回文字符串验证!
- nginx location配置
- 快速学习-RocketMQ Dledger快速搭建
- 原创 | 非典型算法题,用程序和电脑玩一个游戏
- 快速学习-RocketMQ Dledger集群搭建