Angular 模版变量

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

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

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

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

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

例如：

• 引用 DOM 元素

  <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

  <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

• 引用指令

  <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 指令的引用，可以用它来跟踪表单中每一个控件的值和有效性。

• 引用组件

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

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

注意：模版变量的作用域

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

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

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