Angular 模板引用變量

模板變量

模板變量可以幫助你在模板的另一部分使用這個(gè)部分的數(shù)據(jù)。使用模板變量，你可以執(zhí)行某些任務(wù)，比如響應(yīng)用戶輸入或微調(diào)應(yīng)用的表單。

模板變量可以引用這些東西：

• 模板中的 DOM 元素
• 指令
• 元素
• TemplateRef
• Web 組件

本章包含代碼片段的工作實(shí)例參閱現(xiàn)場(chǎng)演練 / 下載范例。

語(yǔ)法

在模板中，要使用井號(hào) ?#? 來(lái)聲明一個(gè)模板變量。下列模板變量 ?#phone? 語(yǔ)法在 ?<input>? 元素上聲明了一個(gè)名為 ?phone ?的變量

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

可以在組件模板中的任何地方引用某個(gè)模板變量。這里的 ?<button>? 就引用了 ?phone ?變量。

<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>

Angular 是如何為模板變量賦值的

Angular 根據(jù)你所聲明的變量的位置給模板變量賦值：

• 如果在組件上聲明變量，該變量就會(huì)引用該組件實(shí)例。
• 如果在標(biāo)準(zhǔn)的 HTML 標(biāo)記上聲明變量，該變量就會(huì)引用該元素。
• 如果你在 ?<ng-template>? 元素上聲明變量，該變量就會(huì)引用一個(gè) ?TemplateRef ?實(shí)例來(lái)代表此模板。
• 如果該變量在右側(cè)指定了一個(gè)名字，比如 ?#var="ngModel"? ，那么該變量就會(huì)引用所在元素上具有這個(gè) ?exportAs ?名字的指令或組件。

將 NgForm 與模板變量一起使用

在大多數(shù)情況下，Angular 會(huì)把模板變量的值設(shè)置為它所在的元素。在前面的例子中， ?phone ?引用的是電話號(hào)碼 ?<input>? 。該按鈕的 click 處理程序會(huì)把這個(gè) ?<input>? 的值傳給該組件的 ?callPhone()? 方法。

這里的 ?NgForm ?指令演示了如何通過(guò)引用指令的的 ?exportAs ?名字來(lái)引用不同的值。在下面的例子中，模板變量 ?itemForm ?在 HTML 中分別出現(xiàn)了三次。

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">Name</label>
  <input type="text" id="name" class="form-control" name="name" ngModel required />
  <button type="submit">Submit</button>
</form>

<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

如果沒(méi)有 ?ngForm ?這個(gè)屬性值，?itemForm ?引用的值將是 HTMLFormElement 也就是 ?<form>? 元素。而 ?Component ?和 ?Directive ?之間的差異在于 Angular 在沒(méi)有指定屬性值的情況下，Angular 會(huì)引用 ?Component?，而 ?Directive ?不會(huì)改變這種隱式引用（即它的宿主元素）。

而使用了 ?NgForm ?之后，?itemForm ?就是對(duì) ?NgForm ?指令的引用，可以用它來(lái)跟蹤表單中每一個(gè)控件的值和有效性。

與原生的 ?<form>? 元素不同， ?NgForm ?指令有一個(gè) ?form ?屬性。如果 ?itemForm.form.valid? 無(wú)效，那么 ?NgForm ?的 ?form ?屬性就會(huì)讓你禁用提交按鈕。

模板變量的作用域

可以在包含此模板變量的模板中的任何地方引用它。而 結(jié)構(gòu)型指令（如 ?*ngIf? 和 ?*ngFor? 或 ?<ng-template>? 同樣充當(dāng)了模板的邊界。你不能在這些邊界之外訪問(wèn)其中的模板變量。

同名變量在模板中只能定義一次，這樣運(yùn)行時(shí)它的值就是可預(yù)測(cè)的。

在嵌套模板中訪問(wèn)

內(nèi)部模板可以訪問(wèn)外模板定義的模板變量。

在下面的例子中，修改 ?<input>? 中的文本值也會(huì)改變 ?<span>? 中的值，因?yàn)?nbsp;Angular 會(huì)立即通過(guò)模板變量 ?ref1 ?來(lái)更新這種變化。

<input #ref1 type="text" [(ngModel)]="firstExample" />
<span *ngIf="true">Value: {{ ref1.value }}</span>

在這種情況下，有一個(gè)包含這個(gè) ?<span>? 的隱式 ?<ng-template>?，而該變量的定義在該隱式模板之外。訪問(wèn)父模板中的模板變量是可行的，因?yàn)樽幽０鍟?huì)從父模板繼承上下文。

我們用更啰嗦的形式重寫(xiě)上述的代碼，可以明確地顯示出 ?<ng-template>?。

<input #ref1 type="text" [(ngModel)]="firstExample" />

<!-- New template -->
<ng-template [ngIf]="true">
  <!-- Because the context is inherited, the value is available to the new template -->
  <span>Value: {{ ref1.value }}</span>
</ng-template>

但是，從外部的父模板訪問(wèn)本模板中的變量是行不通的。

<input *ngIf="true" #ref2 type="text" [(ngModel)]="secondExample" />
<span>Value: {{ ref2?.value }}</span> <!-- doesn't work -->

這個(gè)更啰嗦的形式表明 ?ref2 ?位于外部的父模板中。

<ng-template [ngIf]="true">
  <!-- The reference is defined within a template -->
  <input #ref2 type="text" [(ngModel)]="secondExample" />
</ng-template>
<!-- ref2 accessed from outside that template doesn't work -->
<span>Value: {{ ref2?.value }}</span>

考慮下面這個(gè)帶 ?*ngFor? 的使用范例。

<ng-container *ngFor="let i of [1,2]">
  <input #ref type="text" [value]="i" />
</ng-container>
{{ ref.value }}

這里，?ref.value? 不起作用。結(jié)構(gòu)型指令 ?*ngFor? 將模板實(shí)例化了兩次，因?yàn)?nbsp;?*ngFor? 在對(duì)數(shù)組中的兩個(gè)條目進(jìn)行迭代。因此不可能定義出 ?ref.value? 指向的是誰(shuí)。

對(duì)于結(jié)構(gòu)型指令，比如 ?*ngFor? 或 ?*ngIf? ，Angular 也無(wú)法知道模板是否曾被實(shí)例化過(guò)。

結(jié)果，Angular 無(wú)法訪問(wèn)該值并返回錯(cuò)誤。

訪問(wèn) <ng-template> 的模板變量

在 ?<ng-template>? 上聲明變量時(shí)，該變量會(huì)引用一個(gè) ?TemplateRef ?實(shí)例來(lái)表示該模板。

<ng-template #ref3></ng-template>
<button (click)="log(ref3)">Log type of #ref</button>

在這個(gè)例子中，單擊該按鈕會(huì)調(diào)用 ?log()? 函數(shù)，它把 ?#ref3? 的值輸出到控制臺(tái)。因?yàn)?nbsp;?#ref ?變量在 ?<ng-template>? 上，所以它的值是一個(gè) ?TemplateRef?。

下面是一個(gè)名為 ?TemplateRef ?的 ?TemplateRef()? 函數(shù)在瀏覽器控制臺(tái)中展開(kāi)時(shí)的輸出。

▼ ? TemplateRef()
name: "TemplateRef"
__proto__: Function

模板輸入變量

模板輸入變量是可以在模板的單個(gè)實(shí)例中引用的變量。你可以用 ?let ?關(guān)鍵字聲明模板輸入變量，比如 ?let hero?。

在這個(gè)例子中，有幾個(gè)這樣的變量：?hero?、?i? 和 ?odd?。

<ng-template #hero let-hero let-i="index" let-odd="isOdd">
  <div [class]="{'odd-row': odd}">{{i}}:{{hero.name}}</div>
</ng-template>

此變量的范圍僅限于可復(fù)寫(xiě)模板中的單個(gè)實(shí)例?？梢栽谄渌Y(jié)構(gòu)型指令的定義中再次使用相同的變量名。

相反，你可以通過(guò)在變量名稱前加上 ?#? 來(lái)聲明模板變量，如 ?#var?。模板變量引用其附加的元素、組件或指令。

模板輸入變量和模板變量名稱具有各自的名稱空間。?let hero? 中的模板輸入變量 ?hero ?和 ?#hero? 中的模板變量 ?hero ?是不同的。