Angular之模版引用变量
2024-09-30 19:57:49
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() {
} }
最新文章
- HTML DOM
- cuda多线程间通信
- lunix的查看Tomcat目录下日志的快速操作
- 有关stdint.h 文件
- JTAG和SWD连接关系图
- JavaScript:九种弹出对话框
- IOS学习之路十五(UIView 添加背景图片以及加边框)
- html.ex.day02
- crm2011js操作选项卡和节点
- 非线性规划问题的matlab求解
- Codeforces Round #361 (Div. 2) C.NP-Hard Problem
- Java-反射初级知识掌握
- api_request.go
- form提交所有数据
- C#使用FFMPEG推流,并且获取流保存在本地,随时取媒体进行播放!
- 揭开Docker的神秘面纱
- DatabaseMirroring搭建
- ubuntu16.04安装tensorflow官方教程与机器学习资料【学习笔记】
- WinForm实现Rabbitmq官网6个案例-Hello World
- 在SQL SERVER中批量替换字符串的方法