模板变量

我们可以通过模板变量获取原生的DOM对象。

在模板中，要使用 # 来声明一个模板变量。

下列模板变量 #username 语法在 <input> 元素上声明了一个名为 username 的变量。意思代表我们把该input元素赋值给了一个局部（模板上下文）变量username，同时这个变量可以以用于组件模板的所有表达式中。

xxxxxxxxxx
<input type="text" (keyup.enter)="onKeyUp(username)" #username/>
<button (click)="onClick(username)">
    点击
</button>

模板变量的不同赋值方式

1. 如果在标准的 HTML 标记上声明变量，该变量的值就会引用该元素。
2. 如果在组件上声明变量，该变量就会引用该组件实例。

在组件中获取模板变量的引用

使用 @ViewChild 装饰器可以进行视图查找获取一个元素，获取方式：@ViewChild(模板变量名字符串)。

其中的ElementRef是Angular对原生DOM包装后的Angular元素，访问它里面的nativeElement属性可以获取到对应的原生DOM元素。

xxxxxxxxxx
<input type="text" #username/>

xxxxxxxxxx
//组件文件
import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"
export class HomeComponent implements AfterViewInit {
  @ViewChild('username') username: ElementRef<HTMLInputElement> | undefined
  ngAfterViewInit() {
      // “?” 可以看作TypeSctipt对if语句的简写，当this.username有值的时候调用.nativeElement，没有值的时候则不调用
    console.log(this.username?.nativeElement)
  }
}

实时效果反馈

1.下列描述错误的是：

A 使用#添加模板变量

B 模板变量可以在模板的上下文中使用

C 给HTML标记添加模板变量，模板变量代表一个DOM元素

D 给组件添加模板变量，模板变量代表一个DOM元素

答案

1=>D