angular template reference variables guide

Angular template reference variables

Template reference variables - 模板引用变量，是指在模板中声明的变量，它可以在模板中的任何地方使用，比如在模板中的表单元素中，可以使用模板引用变量来获取表单元素的值。模板引用变量的名字以#开头，比如#name，#age等。模板引用变量的作用域是模板，不能在组件中使用。

模板引用变量可以引用如下内容

• A DOM element in a template
• a directive or component
• a TemplateRef from an ng-template
• a web component

Syntax

模板引用变量以#开头，比如下面的代码中，#phone就是一个模板引用变量, 它引用了<input>元素。就是说，我们可以通过#phone这个模板引用变量来获取<input>元素的值。

<input #phone placeholder="phone number" />

引用DOM元素

下面的代码使用#phone变量引用了input元素，在点击button的时候，获取input元素的值，并调用相应的方法。

<input #phone placeholder="phone number" />
<button (click)="callPhone(phone.value)">Call</button>

如果想在页面上显示input中输入的值，可以使用双向绑定，如下所示：注意这里添加了ngModel，没有这个的话，phone.value是获取不到值的，因为初始的时候输入框并并没有值，而且input值改变的时候，phone.value也无法感知更新。

<input ngModel #phone placeholder="phone number"/>
<p>{{phone.value}}</p>

引用DOM元素应该是模板变量最常用的场景了，有了它，我们就可以不用再使用document.getElementById()这样的方法来获取DOM元素了。

使用模板变量创建ViewChild

模板引用变量可以用来创建ViewChild，比如下面的代码中，#phone就是一个模板引用变量，它引用了<input>元素，然后我们就可以在组件中使用@ViewChild装饰器来获取<input>元素。

template.html代码

<input #phone placeholder="phone number" />

component.ts代码

@ViewChild('phone') phone: ElementRef;

这样我们就可以在组件中调用input元素的方法，比如点击某个按钮时，让input元素获取焦点。

focusPhone() {
  this.phone.nativeElement.focus();
}

引用Component

模板引用变量可以引用组件，比如下面的代码中，#child就是一个模板引用变量，它引用了<child-component>组件，然后我们就可以在模板中使用#child这个模板引用变量来调用<child-component>组件中的方法和属性。

<child-component #child></child-component>
<button (click)="child.childMethod()">Call child method</button>

引用Directive

Directive中有一个属性：exportAs, 这个属性对应的值，就是模板引用变量中可以使用的名字。
下面是一个自定Directive，用来给某一段文字添加背景色。

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  exportAs: 'highlightDirective',
})

export class HighlightDirective {
    constructor(private element: ElementRef) {
    }

    ngOnInit() {
      this.element.nativeElement.setAttribute('style', 'background-color: yellow;');
    }

    setBackgroundColor(color: string) {
      this.element.nativeElement.setAttribute('style', `background-color: ${color};`);
    }
}

下面是使用这个自定义指令的component对应的模板代码：页面加载后，文字的背景色为黄色，点击按钮后，文字的背景色变为红色。注意#highlight="highlightDirective"这句话，highlight是模板引用变量，highlightDirective是Directive中exportAs属性对应的值。这样就把模板变量和其引用的指令关联起来了。

<p appHighlight #highlight="highlightDirective">test-component works!</p>
<button (click)="highlight.setBackgroundColor('red')">Reset color</button>

引用TemplateRef

模板引用变量可以引用<ng-template>元素，这种情形经常出现在条件渲染中，就是根据不同的条件渲染不同的内容，比如下面的代码中，当condition为true时，渲染thenBlock，当condition为false时，渲染elseBlock。这里面的thenBlock和elseBlock引用的都是<ng-template>元素。

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

引用Web Component

模板引用变量可以引用Web Component，比如下面的代码中，#wc就是一个模板引用变量，它引用了<my-custom-element>元素，然后我们就可以在模板中使用#wc这个模板引用变量来调用<my-custom-element>元素中的方法和属性。

<my-custom-element #wc></my-custom-element>
<button (click)="wc.webComponentMethod()">Call web component method</button>