Angular 根据你所声明的变量的位置给模板变量赋值：

1. 如果在组件上声明变量，该变量就会引用该组件实例。

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

3. 如果你在元素上声明变量，该变量就会引用一个 TemplateRef 实例来代表此模板。

4. 如果该变量在右侧指定了一个名字，比如 #var="ngModel" ，那么该变量就会引用所在元素上具有这个 exportAs 名字的指令或组件。

例如：

• 引用 DOM 元素

  1 2 3 4 5

  <input #phone placeholder="phone number" /> <!-- lots of other elements --> <!-- phone refers to the input element; pass its `value` to an event handler --> <button (click)="callPhone(phone.value)">Call</button>

  使用 # 声明模版变量引用 DOM 元素信息，在模版的其他地方可以直接使用

• 引用 TemplateRef

  1 2 3 4 5 6 7 8 9 10

  <ng-container *ngTemplateOutlet="tableList"></ng-container> <ng-container [ngTemplateOutlet]="operateBar"></ng-container> <ng-template #tableList> <!-- content --> </ng-template> <ng-template #operateBar> <!-- content --> </ng-template>

  在元素上声明模版变量，该变量就会引用一个 TemplateRef 实例来代表此模板，的 ngTemplateOutlet 属性可以输出 TemplateRef

• 引用指令

  1 2 3 4 5 6 7 8 9

  <form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)"> <label for="name">Name <input class="form-control" name="name" ngModel required /> </label> <button type="submit">Submit</button> </form> <div [hidden]="!itemForm.form.valid"> <p>{{ submitMessage }}</p> </div>

  itemForm 是对 NgForm 指令的引用，可以用它来跟踪表单中每一个控件的值和有效性。

• 引用组件

  1 2 3

  <app-adding-contact #contactCom></app-adding-contact> <button (click)="getChildInfo(contactCom)">test</button>

  通过 getChildInfo() 方法父组件可以直接获取子组件信息

注意：模版变量的作用域

结构型指令(如 *ngIf 和 *ngFor 或)会形成一个隐式模版，因此不可以在指令形成的模版外面访问其中的模版变量。但是子模版可以获取父模版的值。

1
2
3
4
5
6
7

<!-- 子模版可以获取父模版的值 -->
<input #ref type="text" />
<span *ngIf="true">{{ref.value}}</span>
<!-- 其包含的隐式模版 ↓↓ -->
<ng-template [ngIf]="true">
  <span>ref.value</span>
</ng-template>

1
2
3
4

<!-- 在模版外读取其内的模版变量不可行↓↓ -->
<input *ngIf="true" #ref type="text" />
<span>{{ref.value}}</span>