AngularJS 中的模板引用变量

Angular 中的模板引用变量用于访问 DOM 内任何元素的所有属性。它也可以是对 Angular 组件或指令或 Web 组件的引用。

模板引用变量可以参考以下——

DOM 元素
指令
角组件
网页组件

方法：

创建一个要使用的 Angular 应用程序。
创建输入元素并使用 # 标签将模板引用添加到此输入字段。
将此模板引用绑定在按钮单击方法“changeTitle()”中。
现在在 changeTitle 方法中，我们可以完全访问这个输入字段，在这里我们设置了输入字段值和焦点属性。

语法：在变量名前使用#标签。示例——#geek

示例 1：

app.component.html

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  changeTitle(inputElement){
    inputElement.value = "GeeksforGeeks";
    inputElement.focus();
  }
    
}

app.component.html

{{email_address}}

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  email_address = 'geek@geek.com';
  onSubmit(form){
    this.email_address = form.value.email;
  }
}

在上面的 HTML 模板中，我们使用模板引用变量“email”创建了一个输入元素，并创建了一个按钮。单击按钮时，我们访问完整的输入元素及其所有属性。

"#geek" is template reference variable on input field

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  changeTitle(inputElement){
    inputElement.value = "GeeksforGeeks";
    inputElement.focus();
  }
    
}

输入元素的模板引用变量可以在 changeTitle()函数中访问，并且在单击按钮时，我们正在更新输入元素值并使该字段成为焦点。

输出：

示例 2：在模板驱动的表单中，我们实际上是使用模板引用变量来访问表单数据。

app.component.html

{{email_address}}

所以在这里我们使用表单元素上的模板引用变量访问表单数据，在表单提交时，我们显示通过表单字段提供的输入电子邮件。

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  email_address = 'geek@geek.com';
  onSubmit(form){
    this.email_address = form.value.email;
  }
}

因此，使用“itemForm”模板引用变量访问完整的表单字段，我们在浏览器中显示电子邮件地址。

输出：