欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Angular模板引用變量及其作用域

 更新時(shí)間:2018年11月23日 10:44:24   作者:Fortnight  
這篇文章主要介紹了詳解Angular模板引用變量及其作用域,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

Angular模板引用變量

如果你曾經(jīng)參與過Angular項(xiàng)目的開發(fā),那么你可能一眼就會看出誰將是本文的主角:

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

若你對此陌生,也無須在意。示例代碼的<input>標(biāo)簽的屬性中存在一個(gè)畫風(fēng)明顯與其他屬性不同的家伙——#name,這種以一個(gè)#開頭命名,被附加在DOM元素上的屬性,被稱為模板引用變量(template reference variables)。

那么何為模板引用變量呢?文檔是這樣描述的:

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

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

既然模板引用變量是模板中某一元素的引用,那理所當(dāng)然地我們便可以通過這個(gè)引用變量" 觸及 "該模板元素的" 實(shí)體 "。這在實(shí)際地開發(fā)中是十分實(shí)用的,考慮以下代碼:

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

通過模板引用變量我們獲得了app-component組件的實(shí)例引用,這使得我們可以輕松地在模板中訪問app-component組件內(nèi)部的成員。在某些情境下,這種能力給我們的開發(fā)提供了很大的助力。

模板引用變量的作用域

You can refer to a template reference variable anywhere in the template.

在文檔中,官方毫不含糊地向我們表示:模板引用變量可以在模板中的任何地方使用。最騷的是,“任何地方”還被特別加粗。我們在大多數(shù)的時(shí)候,并不會對這句話產(chǎn)生疑問,但也許某天你會懷疑這個(gè)anywhere是否真實(shí)。有如下的代碼:

<app-card>
  <ng-template #body>
    <app-component #component [input]="variable"></app-component>
  </ng-template>
  <ng-template #footer>
    {{component.input}}
  </ng-template>
</app-card>

當(dāng)代碼運(yùn)行后,我們將會在控制臺看到這樣的錯(cuò)誤提示:

TypeError: Cannot read property 'input' of undefined

為什么component會是undefined?

答案其實(shí)很明顯,模板引用對象可以在模板中的任何地方使用,但此例中component的定義與使用卻并不在一個(gè)template中。文檔中所描述的 template 并不能直接與 組件的模板文件 劃上等號。當(dāng)我們使用ng-template時(shí),會在當(dāng)前模板的內(nèi)部再建立一個(gè)新的模板,它的內(nèi)部無法直接被外部模板觸及,因此示例中的component.input自然會引起錯(cuò)誤。

當(dāng) template 的定義明確以后,一切都是如此簡單:模板引用變量存在作用域,其作用域是它所處的 template,而非它所在的模板文件,同時(shí)它可以在其作用域內(nèi)的任何地方被使用。

最后,我們再看一個(gè)例子:

<div *ngIf="true">
  <app-component #component [input]="variable"></app-component>
</div>
{{component.input}}

當(dāng)這段代碼運(yùn)行后,我們依舊會在控制臺看到:

TypeError: Cannot read property 'input' of undefined

至于背后的原因,我便作為小小的懸念留給大家,由大家自己去了解。以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論