站長(zhǎng)資訊網(wǎng)本篇文章繼續(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() }}
通過(guò)模板引用變量我們獲得了app-component組件的實(shí)例引用，這使得我們可以輕松地在模板中訪問(wèn)app-component組件內(nèi)部的成員。
2. 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名字的指令或組件。
3. 將 NgForm 與模板變量一起使用
這里的 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 引用的值將是 <form> 元素。而 Com 和 Directive 之間的差異在于 Angular 在沒(méi)有指定屬性值的情況下，Angular 會(huì)引用 Component，而 Directive 不會(huì)改變這種隱式引用（即它的宿主元素)。(還沒(méi)讀懂什么意思.......
而使用了 NgForm 之后，itemForm 就是對(duì) NgForm 指令的引用，可以用它來(lái)跟蹤表單中每一個(gè)控件的值和有效性。
與原生的 <form> 元素不同， NgForm 指令有一個(gè) form 屬性。如果 itemForm.form.valid 無(wú)效，那么 NgForm 的 form 屬性就會(huì)讓你禁用提交按鈕。
. 其實(shí)在使用angular寫列表頁(yè)時(shí)，就會(huì)經(jīng)常用到模板引用變量：
在列表組件的input框里引用ngxQuery的executeQuery()方法。當(dāng)然如果我們要在ts中使用模板引用變量，就要使用@ViewChild和@ViewChildren是Angular提供給我們的裝飾器。
我們?cè)趖s中通過(guò)模板變量名獲取獲取到ngxQuery組件：
在ts中就可以直接調(diào)用ngxQuery的ExecuteQuery()方法，當(dāng)有參數(shù)傳入時(shí)刷新列表：
(有關(guān)ViewChild裝飾器的有關(guān)內(nèi)容可以移步******)
對(duì)于父子組件之間，模板引用變量也可以直接用：
buGroup是bugroupSelectComponent中的一個(gè)數(shù)組,通過(guò)父子組件把其作為模板引用變量傳過(guò)來(lái):
在父組件ts中獲取到子組件的值并使用：
