淺析Angular中的模板引用變量

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

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

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

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

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

• 如果在組件上聲明變量，該變量就會引用該組件實例。

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

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

• 如果該變量在右側(cè)指定了一個名字，比如 #var="ngModel" ，那么該變量就會引用所在元素上具有這個 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 這個屬性值，itemForm 引用的值將是 <form> 元素。而 Com 和 Directive 之間的差異在于 Angular 在沒有指定屬性值的情況下，Angular 會引用 Component，而 Directive 不會改變這種隱式引用（即它的宿主元素)。(還沒讀懂什么意思.......

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

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

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

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

我們在ts中通過模板變量名獲取獲取到ngxQuery組件：

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

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

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

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

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