建站
咨詢
售后
建站咨詢
新聞中心
模板變量
模板變量可以幫助你在模板的另一部分使用這個(gè)部分的數(shù)據(jù)。使用模板變量，你可以執(zhí)行某些任務(wù)，比如響應(yīng)用戶輸入或微調(diào)應(yīng)用的表單。
創(chuàng)新互聯(lián)是專業(yè)的威信網(wǎng)站建設(shè)公司，威信接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行威信網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
模板變量可以引用這些東西：
- 模板中的 DOM 元素
- 指令
- 元素
- TemplateRef
- Web 組件
本章包含代碼片段的工作實(shí)例參閱現(xiàn)場演練 / 下載范例。
語法
在模板中，要使用井號 ?#? 來聲明一個(gè)模板變量。下列模板變量 ?#phone? 語法在 ?? 元素上聲明了一個(gè)名為 ?phone ?的變量
可以在組件模板中的任何地方引用某個(gè)模板變量。這里的 ?? 就引用了 ?phone ?變量。
Angular 是如何為模板變量賦值的
Angular 根據(jù)你所聲明的變量的位置給模板變量賦值：
- 如果在組件上聲明變量，該變量就會引用該組件實(shí)例。
- 如果在標(biāo)準(zhǔn)的 HTML 標(biāo)記上聲明變量，該變量就會引用該元素。
- 如果你在 ?
TemplateRef?實(shí)例來代表此模板。 - 如果該變量在右側(cè)指定了一個(gè)名字，比如 ?
#var="ngModel"? ，那么該變量就會引用所在元素上具有這個(gè) ?exportAs?名字的指令或組件。
將 NgForm 與模板變量一起使用
在大多數(shù)情況下，Angular 會把模板變量的值設(shè)置為它所在的元素。在前面的例子中， ?phone ?引用的是電話號碼 ?? 。該按鈕的 click 處理程序會把這個(gè) ?? 的值傳給該組件的 ?callPhone()? 方法。
這里的 ?NgForm ?指令演示了如何通過引用指令的的 ?exportAs ?名字來引用不同的值。在下面的例子中，模板變量 ?itemForm ?在 HTML 中分別出現(xiàn)了三次。
{{ submitMessage }}
如果沒有 ?ngForm ?這個(gè)屬性值，?itemForm ?引用的值將是 HTMLFormElement 也就是 ?? 元素。而 ?Component ?和 ?Directive ?之間的差異在于 Angular 在沒有指定屬性值的情況下，Angular 會引用 ?Component?，而 ?Directive ?不會改變這種隱式引用（即它的宿主元素）。
而使用了 ?NgForm ?之后，?itemForm ?就是對 ?NgForm ?指令的引用，可以用它來跟蹤表單中每一個(gè)控件的值和有效性。
與原生的 ?? 元素不同， ?NgForm ?指令有一個(gè) ?form ?屬性。如果 ?itemForm.form.valid? 無效，那么 ?NgForm ?的 ?form ?屬性就會讓你禁用提交按鈕。
模板變量的作用域
可以在包含此模板變量的模板中的任何地方引用它。而 結(jié)構(gòu)型指令（如 ?*ngIf? 和 ?*ngFor? 或 ?
同名變量在模板中只能定義一次，這樣運(yùn)行時(shí)它的值就是可預(yù)測的。
在嵌套模板中訪問
內(nèi)部模板可以訪問外模板定義的模板變量。
在下面的例子中，修改 ?? 中的文本值也會改變 ?? 中的值，因?yàn)?nbsp;Angular 會立即通過模板變量 ?ref1 ?來更新這種變化。
Value: {{ ref1.value }}在這種情況下，有一個(gè)包含這個(gè) ?? 的隱式 ?
我們用更啰嗦的形式重寫上述的代碼，可以明確地顯示出 ?
Value: {{ ref1.value }}
但是，從外部的父模板訪問本模板中的變量是行不通的。
Value: {{ ref2?.value }} 這個(gè)更啰嗦的形式表明 ?ref2 ?位于外部的父模板中。
Value: {{ ref2?.value }}考慮下面這個(gè)帶 ?*ngFor? 的使用范例。
{{ ref.value }}這里，?ref.value? 不起作用。結(jié)構(gòu)型指令 ?*ngFor? 將模板實(shí)例化了兩次，因?yàn)?nbsp;?*ngFor? 在對數(shù)組中的兩個(gè)條目進(jìn)行迭代。因此不可能定義出 ?ref.value? 指向的是誰。
對于結(jié)構(gòu)型指令，比如 ?*ngFor? 或 ?*ngIf? ，Angular 也無法知道模板是否曾被實(shí)例化過。
結(jié)果，Angular 無法訪問該值并返回錯(cuò)誤。
訪問 的模板變量
在 ?TemplateRef ?實(shí)例來表示該模板。
在這個(gè)例子中，單擊該按鈕會調(diào)用 ?log()? 函數(shù)，它把 ?#ref3? 的值輸出到控制臺。因?yàn)?nbsp;?#ref ?變量在 ?TemplateRef?。
下面是一個(gè)名為 ?TemplateRef ?的 ?TemplateRef()? 函數(shù)在瀏覽器控制臺中展開時(shí)的輸出。
▼ ? TemplateRef()
name: "TemplateRef"
__proto__: Function模板輸入變量
模板輸入變量是可以在模板的單個(gè)實(shí)例中引用的變量。你可以用 ?let ?關(guān)鍵字聲明模板輸入變量，比如 ?let hero?。
在這個(gè)例子中，有幾個(gè)這樣的變量：?hero?、?i? 和 ?odd?。
{{i}}:{{hero.name}}
此變量的范圍僅限于可復(fù)寫模板中的單個(gè)實(shí)例。可以在其他結(jié)構(gòu)型指令的定義中再次使用相同的變量名。
相反，你可以通過在變量名稱前加上 ?#? 來聲明模板變量，如 ?#var?。模板變量引用其附加的元素、組件或指令。
模板輸入變量和模板變量名稱具有各自的名稱空間。?let hero? 中的模板輸入變量 ?hero ?和 ?#hero? 中的模板變量 ?hero ?是不同的。
文章名稱：創(chuàng)新互聯(lián)Angular教程：Angular模板引用變量
文章路徑：http://www.5511xx.com/article/dpjjssg.html
