小編給大家分享一下Angular模板引用變量及其作用域的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、武城網(wǎng)站維護(hù)、網(wǎng)站推廣。

Angular模板引用變量

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

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

若你對(duì)此陌生，也無須在意。示例代碼的<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.

在文檔中，官方毫不含糊地向我們表示：模板引用變量可以在模板中的任何地方使用。最騷的是，“任何地方”還被特別加粗。我們?cè)诖蠖鄶?shù)的時(shí)候，并不會(huì)對(duì)這句話產(chǎn)生疑問，但也許某天你會(huì)懷疑這個(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)行后，我們將會(huì)在控制臺(tái)看到這樣的錯(cuò)誤提示：

TypeError: Cannot read property 'input' of undefined

為什么component會(huì)是undefined？

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

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

最后，我們?cè)倏匆粋€(gè)例子：

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

當(dāng)這段代碼運(yùn)行后，我們依舊會(huì)在控制臺(tái)看到：

TypeError: Cannot read property 'input' of undefined

看完了這篇文章，相信你對(duì)“Angular模板引用變量及其作用域的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：Angular模板引用變量及其作用域的示例分析-創(chuàng)新互聯(lián)
URL地址：http://chinadenli.net/article30/ddiiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站制作、網(wǎng)站排名、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)