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.

模板引用变量通常用来引用模板中的某个 DOM 元素,也可以引用 Angular 组件、指令、Web Component(自定义元素标签)。

store.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-store',
templateUrl: './store.component.html',
styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit { name = 'SUV'; constructor() { } ngOnInit() {
} }

store.component.html

<!-- 引用DOM元素 -->

<span #title>4S店</span>
<button (click)="print(title.innerHTML);">单击</button> <input type="tel" #tel value="021-12345678"/>
<button (click)="print(tel.value);">单击</button> <!-- 引用Angular组件 --> <app-car #car></app-car>
<button (click)="print(car.name);">单击</button>

car.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-car',
templateUrl: './car.component.html',
styleUrls: ['./car.component.css']
})
export class CarComponent implements OnInit { name = 'SUV'; constructor() { } ngOnInit() {
} }

Angular之模版引用变量的更多相关文章

  1. Java基础-被final修饰的引用变量的指向

    final修饰的引用变量一旦初始化赋值之后就不能再指向其他的对象,那么该引用变量指向的对象的内容可变吗?看下面这个例子: public class Test { public static void ...

  2. PHP GC垃圾回收机制之引用变量回收周期疑问

    普通的引用变量的销毁大家都知道, 当unset的时候如果refcount = 0 则认为无用, 销毁. 但是手册中提到一点会有递归引用的问题,很是奇葩 代码如下 <?php $a = 1; $a ...

  3. C++引用变量(转)

    引用变量 c++中引用变量的使用: 定义: int rate=80; int  & pt=rate 1.pt 是引用变量,申明引用变量时必须将其初始化.pt 和rate 的值指向相同的内存变量 ...

  4. c#问答篇:对象与引用变量-----初学者的困惑

    转自:http://www.cnblogs.com/huangyu/archive/2004/08/02/29622.html 从宏观的角度来看,对象是类的实例.比如: //定义一个名为Someone ...

  5. C++ primer(八)--内联函数 引用变量 引用传递函数参数 函数重载/模板/模板具体化

    一.内联函数     常规函数和内联函数的区别在于C++编译器如何将他们组合到程序中.编译过程的最终产品是可执行程序--由一组机器语言指令组成.运行程序时,操作系统将这些指令载入到计算机内存中,因此每 ...

  6. C++引用变量学习

    版权所有,转载请注明来源 (1)reference variable(rv) 主要用处是作为方程的形式参数,使用rv 可以直接对原数据进行操作而不是该数据的拷贝,节省了时间和空间,尤其是对于结构体以及 ...

  7. C++学习笔记29,引用变量(1)

    引用变量在创建的时候就必须初始化.无法创建一个未被初始化的引用. #include <iostream> using namespace std; int main() { int x=1 ...

  8. [DB][mybatis]MyBatis mapper文件引用变量#{}与${}差异

    MyBatis mapper文件引用变量#{}与${}差异 默认,使用#{}语法,MyBatis会产生PreparedStatement中.而且安全的设置PreparedStatement參数,这个过 ...

  9. PHP关于foreach使用引用变量的坑

    写PHP好多年,但仍然会犯低级错误,今天遇到个 foreach中引用变量时的坑,PHP版本为 5.6.12 代码如下: <?php $arr = ['a', 'b', 'c', 'd', 'e' ...

随机推荐

  1. UI5-学习篇-18-云端UI5应用部署到Fiori Launchpad

    UI5应用发布SCP 选择UI5应用项目,右键 Deploy - Deploy to SAP Cloud Platform 输入云平台子账号,项目名称,应用名称,如下图所示: 点击Open the r ...

  2. eclipse 使用Maven deploy命令部署构建到Nexus

    转载于:http://blog.csdn.net/jun55xiu/article/details/43051627 1  应用场景:SYS-UTIL(系统工具)项目部署.构建成JAR包(SYS-UT ...

  3. DATASNAP远程方法返回TSTREAM正解(转咏南兄)

    DATASNAP远程方法返回TSTREAM正解 DATASNAP远程方法返回TSTREAM,如果数据大小超过32K是会报错的.许多DELPHIER栽在这个上头,甚至开始怀疑TSTREAM返回数据的可行 ...

  4. TFS登录时保存了用户密码,如何用其他账户登录

      来源:http://blog.csdn.net/littlegreenfrog/article/details/5254633 使用TFS2008过程中,常常由于已经保存用户名和密码,却没有重新登 ...

  5. ArcGIS案例学习笔记4_2_水文分析批处理地理建模

    ArcGIS案例学习笔记4_2_水文分析批处理地理建模 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 概述 计划时间:第4天下午 目的:自动化,批量化,批处理,提 ...

  6. Oracle 未能加载文件或程序集Oracle.DataAccess

    原文地址;https://www.cnblogs.com/xuekai-to-sharp/p/3586071.html 关键是引用DLL:Oracle.DataAccess.dll DLL文件的路径: ...

  7. 吴裕雄 python 机器学习-KNN(2)

    import matplotlib import numpy as np import matplotlib.pyplot as plt from matplotlib.patches import ...

  8. python闭包的代码

  9. import模块

    一.在import模块的时候发生的事情 1.寻找模块2.如果找到了,就开辟一块空间,执行这个模块3.把这个模块中用到的名字都录到新开辟的空间中4.创建一个变量来引用这个模块中 二.注意事项: *1.模 ...

  10. SSM商城项目(三)

    1. 学习计划 1.商品类目选择 2.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 3.富文本编辑器的使用KindEditor 2. 商品类目选择 2.1. 原型 2.2. 功能分 ...