Angular中的模板引用變量有什么作用

這篇文章主要介紹了Angular中的模板引用變量有什么作用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Angular中的模板引用變量有什么作用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

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

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

<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寫(xiě)列表頁(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中獲取到子組件的值并使用：

關(guān)于“Angular中的模板引用變量有什么作用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Angular中的模板引用變量有什么作用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。