本篇文章繼續(xù)學(xué)習(xí)Angular，帶大家了解一下Angular中的模板引用變量，希望對(duì)大家有所幫助！

<input type="text" [value]="value" #name>

1. 模板引用變量可以是Angualr模板中的DOM元素、Angular組件（指令)，元素，TemplateRef,甚至Web組件的引用，而它具體是什么，則取決于它所依附的元素（不使用指令進(jìn)行干預(yù)時(shí)）。如前文示例代碼中的模板引用變量name就是<input>這一DOM元素的引用?！鞠嚓P(guān)教程推薦：《angular教程》】

<app-component #component [input]="variable"></app-component> {{ component.input }} {{ component.func() }}

通過模板引用變量我們獲得了app-component組件的實(shí)例引用，這使得我們可以輕松地在模板中訪問app-component組件內(nèi)部的成員。
2. Angular 根據(jù)你所聲明的變量的位置給模板變量賦值：

• 如果在組件上聲明變量，該變量就會(huì)引用該組件實(shí)例。

• 如果在標(biāo)準(zhǔn)的 HTML 標(biāo)記上聲明變量，該變量就會(huì)引用該元素。

• 如果你在 <ng-template> 元素上聲明變量，該變量就會(huì)引用一個(gè) TemplateRef 實(shí)例來代表此模板。

• 如果該變量在右側(cè)指定了一個(gè)名字，比如 #var="ngModel" ，那么該變量就會(huì)引用所在元素上具有這個(gè) exportAs 名字的指令或組件。

3. 將 NgForm 與模板變量一起使用
這里的 NgForm 指令演示了如何通過引用指令的的 exportAs 名字來引用不同的值。在下面的例子中，模板變量 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>

* 如果沒有 ngForm 這個(gè)屬性值，itemForm 引用的值將是 <form> 元素。而 Com 和 Directive 之間的差異在于 Angular 在沒有指定屬性值的情況下，Angular 會(huì)引用 Component，而 Directive 不會(huì)改變這種隱式引用（即它的宿主元素)。(還沒讀懂什么意思.......

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

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

. 其實(shí)在使用angular寫列表頁時(shí)，就會(huì)經(jīng)常用到模板引用變量：

在列表組件的input框里引用ngxQuery的executeQuery()方法。當(dāng)然如果我們要在ts中使用模板引用變量，就要使用@ViewChild和@ViewChildren是Angular提供給我們的裝飾器。

我們?cè)趖s中通過模板變量名獲取獲取到ngxQuery組件：

在ts中就可以直接調(diào)用ngxQuery的ExecuteQuery()方法，當(dāng)有參數(shù)傳入時(shí)刷新列表：

(有關(guān)ViewChild裝飾器的有關(guān)內(nèi)容可以移步******)

對(duì)于父子組件之間，模板引用變量也可以直接用：

buGroup是bugroupSelectComponent中的一個(gè)數(shù)組,通過父子組件把其作為模板引用變量傳過來:

在父組件ts中獲取到子組件的值并使用：