建站
咨詢
售后
建站咨詢
新聞中心
文本插值
文本插值允許你將動(dòng)態(tài)字符串值合并到 HTML 模板中。通過(guò)插值，你可以動(dòng)態(tài)更改應(yīng)用視圖中顯示的內(nèi)容，例如顯示包含用戶名的自定義問(wèn)候語(yǔ)。
要了解本指南中涉及的語(yǔ)法和代碼片段，請(qǐng)參閱 現(xiàn)場(chǎng)演練 / 下載范例。
使用插值語(yǔ)法顯示值
插值是指將表達(dá)式嵌入到被標(biāo)記的文本中。默認(rèn)情況下，插值使用雙花括號(hào) ?{{? 和 ?}}? 作為定界符。
為了說(shuō)明插值的工作原理，請(qǐng)考慮一個(gè)包含 ?currentCustomer ?變量的 Angular 組件：
currentCustomer = 'Maria';可以用插值在相應(yīng)的組件模板中顯示此變量的值：
Current customer: {{ currentCustomer }}
Angular 會(huì)用相應(yīng)組件屬性的字符串值替換掉 ?currentCustomer?。在這里，它的值是 ?Maria?。
在以下示例中，Angular 會(huì)求出 ?title ?和 ?itemImageUrl ?屬性的值，以顯示一些標(biāo)題文本和圖像。
{{title}}
模板表達(dá)式
模板表達(dá)式會(huì)產(chǎn)生一個(gè)值，它出現(xiàn)在雙花括號(hào) ?{{ }}? 中。 Angular 解析該表達(dá)式并將其賦值給綁定目標(biāo)的某個(gè)屬性。目標(biāo)可以是 HTML 元素、組件或指令。
用插值解析表達(dá)式
一般來(lái)說(shuō)，括號(hào)間的文本是一個(gè)模板表達(dá)式，Angular 先對(duì)它求值，再把它轉(zhuǎn)換成字符串。 下列插值通過(guò)把括號(hào)中的兩個(gè)數(shù)字相加說(shuō)明了這一點(diǎn)：
The sum of 1 + 1 is {{1 + 1}}.
這些表達(dá)式也可以調(diào)用宿主組件的方法，就像下面用的 ?getVal()?：
The sum of 1 + 1 is not {{1 + 1 + getVal()}}.
通過(guò)插值，Angular 執(zhí)行以下任務(wù)：
- 計(jì)算所有位于雙花括號(hào)中的表達(dá)式。
- 將這些表達(dá)式的結(jié)果轉(zhuǎn)換為字符串。
- 將這些結(jié)果融入相鄰的字符串文本中。
- 將融合后的結(jié)果賦值給元素或指令的屬性。
如果你想用別的分隔符來(lái)代替 ?
{{? 和 ?}}?，也可以通過(guò) ?@Component()? 元數(shù)據(jù)中的 ?interpolation?選項(xiàng)來(lái)配置插值分隔符。
語(yǔ)法
模板表達(dá)式和 JavaScript 很相似。許多 JavaScript 表達(dá)式都是合法的模板表達(dá)式，但以下情況除外。
你不能使用那些具有或可能引發(fā)副作用的 JavaScript 表達(dá)式，包括：
- 賦值 (?
=?, ?+=?, ?-=?, ?...?) - 運(yùn)算符，比如 ?
new?、?typeof?或 ?instanceof?等。 - 使用 ?
;? 或 ?,? 串聯(lián)起來(lái)的表達(dá)式 - 自增和自減運(yùn)算符：?
++? 和 ?--? - 一些 ES2015+ 版本的運(yùn)算符
和 JavaScript 語(yǔ)法的其它顯著差異包括：
- 不支持位運(yùn)算，比如 ?
|? 和 ?&? - 新的模板表達(dá)式運(yùn)算符，例如 ?
|?，??.? 和 ?!?
表達(dá)式上下文
插值表達(dá)式具有上下文 —— 表達(dá)式所屬應(yīng)用中的特定部分。通常，此上下文就是組件實(shí)例。
在下面的代碼片段中，表達(dá)式 ?recommended ?和 ?itemImageUrl2 ?表達(dá)式所引用的都是 ?AppComponent ?中的屬性。
{{recommended}}
![]()
表達(dá)式也可以引用模板上下文中的屬性。
下面的例子就使用了模板輸入變量 ?customer?。
- {{customer.name}}
接下來(lái)的例子使用了模板引用變量 ?#customerInput?。
模板表達(dá)式不能引用全局命名空間中的任何東西，比如 ?
window?或 ?document?。它們也不能調(diào)用 ?console.log? 或 ?Math.max?。 它們只能引用表達(dá)式上下文中的成員。
防止命名沖突
表達(dá)式求值的上下文是模板變量、指令的上下文對(duì)象（如果有的話）以及組件成員的并集。如果所引用的名稱在多個(gè)命名空間都有，則 Angular 將應(yīng)用以下邏輯來(lái)確定上下文：
- 模板變量的名稱。
- 指令上下文中的名稱。
- 組件成員的名稱。
為避免變量遮蓋另一個(gè)上下文中的變量，請(qǐng)保持變量名稱唯一。在以下示例中，?AppComponent ?模板在問(wèn)候 ?customer ?Padma。
然后，一個(gè) ?ngFor ?列出了 ?customers ?數(shù)組中的每個(gè) ?customer?。
@Component({
template: `
Hello, {{customer}}
- {{ customer.value }}
`
})
class AppComponent {
customers = [{value: 'Ebony'}, {value: 'Chiho'}];
customer = 'Padma';
}?ngFor ?中的 ?customer ?處于一個(gè) ?customers ?數(shù)組中的 ?customer?，在這里是 Ebony 和 Chiho。此列表中不包含 Padma，因?yàn)槟莻€(gè) ? customer ?位于 ?ngFor ?以外的另一個(gè)上下文中。反之，?? 中的 ?customer ?不包括 Ebony 或 Chiho，因?yàn)樵?nbsp;?customer ?的上下文是組件類，而這個(gè)類中 ?customer ?的值是 Padma。
表達(dá)式最佳實(shí)踐
使用模板表達(dá)式時(shí)，請(qǐng)遵循以下最佳實(shí)踐：
- 使用短表達(dá)式
- 快速執(zhí)行
- 沒(méi)有可見(jiàn)的副作用
盡可能使用屬性名稱或方法調(diào)用。將應(yīng)用和業(yè)務(wù)邏輯保留在組件中，這里更便于開(kāi)發(fā)和測(cè)試。
Angular 會(huì)在每個(gè)變更檢測(cè)周期之后執(zhí)行模板表達(dá)式。許多異步活動(dòng)都會(huì)觸發(fā)變更檢測(cè)周期，例如解析 Promise、HTTP 結(jié)果、計(jì)時(shí)器事件、按鍵和鼠標(biāo)移動(dòng)。
表達(dá)式應(yīng)盡快完成，以保持用戶體驗(yàn)的性能，尤其是在速度較慢的設(shè)備上。
根據(jù) Angular 的單向數(shù)據(jù)流模型，除了目標(biāo)屬性的值之外，模板表達(dá)式不應(yīng)更改任何應(yīng)用狀態(tài)。讀取組件值不應(yīng)更改其他顯示值。該視圖應(yīng)在整個(gè)渲染過(guò)程中保持穩(wěn)定。
冪等表達(dá)式能減少副作用
冪等的表達(dá)式是最理想的，因?yàn)樗鼪](méi)有副作用，并且可以提高 Angular 的變更檢測(cè)性能。 用 Angular 術(shù)語(yǔ)來(lái)說(shuō)，冪等表達(dá)式總會(huì)返回
完全相同的東西，除非其依賴值之一發(fā)生了變化。
在單獨(dú)的一次事件循環(huán)中，被依賴的值不應(yīng)該改變。 如果冪等的表達(dá)式返回一個(gè)字符串或數(shù)字，如果連續(xù)調(diào)用它兩次，會(huì)返回相同的字符串或數(shù)字。 如果冪等的表達(dá)式返回一個(gè)對(duì)象（包括 ?Date ?或 ?Array?），如果連續(xù)調(diào)用它兩次，會(huì)返回同一個(gè)對(duì)象的引用。
對(duì)于 ?
*ngFor?，這種行為有一個(gè)例外。?*ngFor? 具有 ?trackBy?功能，在迭代對(duì)象時(shí)它可以正確處理對(duì)象值的變化。
網(wǎng)頁(yè)名稱：創(chuàng)新互聯(lián)Angular教程：Angular文本插值
當(dāng)前URL：http://www.5511xx.com/article/djcidsp.html
