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. Git 全局配置查看修改

    查看 git config --list git config --global --list 新增 git config --global user.emal=123 删除 git config - ...

  2. python 阿狸的进阶之路(6)

    常用模块 json # 序列化 #将内存的数据存到硬盘中,中间的格式,可以被多种语言识别,跨平台交互数据 #json 可以将字典之类的数据类型存到字典中 import json dic = {&quo ...

  3. 爬虫--requests模块学习

    requests模块 - 基于如下5点展开requests模块的学习 什么是requests模块 requests模块是python中原生的基于网络请求的模块,其主要作用是用来模拟浏览器发起请求.功能 ...

  4. 配置maven访问nexus,配置项目pom.xml以发布maven项目到nexus中

    maven访问nexus有三种配置方法,分别为: 项目pom.xml,优先级最高: user的settings.xml,优先级中,未在pom.xml中配置repository标签,则使用这个配置: m ...

  5. 2319__1.5.3 Superprime Rib 特殊的质数肋骨

    [Submit][Status][Forum] Description 农民约翰母牛总是产生最好的肋骨. 你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的 ...

  6. Java读写avro例子

    一.avro是一个数据序列化框架,可以高效得进行序列化和反序列化,支持C, C++, C#, Java, PHP, Python, 和Ruby语言.现在使用Java来读写. 二.环境搭建 1.下载av ...

  7. intellij idea远程debug调试resin4教程

    昨天有个项目部署在阿里云 想远程调试不知道怎么弄.看日志需要账户密码很不方便呀.今天加班特意baidu了下. 1.先在远程的resin修改conf中resin.xml配置文件 在server-defa ...

  8. Mysql(MyISAM和InnoDB)及Btree和索引优化

    MYSQL 一.引擎 mysql:MySQL是一个关系型数据库管理系统,其中有两种引擎最为常见MyISAM和InnoDB MyISAM(非聚集索引)  MySQL 5.0 之前的默认数据库引擎,最为常 ...

  9. linux 一个跟踪文件删除的小技巧

    最近有同事问我说他有个现场环境,经常会丢失业务文件,每天都出现,几百个里面丢失1到两个. 为了解决这个问题,我让他布置audit,具体可以man一下auditctl. 过了一天,他说audit.log ...

  10. Oracle数据文件转移操作

    由于oracle表空间数据文件规划问题导致当前数据文件所在文件系统空间不足,当其他文件系统空间充足情况下,可将数据文件移动到空间充足的文件系统下.本文主要描述Oracle表空间数据文件移动的操作步骤. ...