W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
文本插值允許你將動態(tài)字符串值合并到 HTML 模板中。通過插值,你可以動態(tài)更改應(yīng)用視圖中顯示的內(nèi)容,例如顯示包含用戶名的自定義問候語。
要了解本指南中涉及的語法和代碼片段,請參閱 現(xiàn)場演練 / 下載范例。
插值是指將表達式嵌入到被標(biāo)記的文本中。默認(rèn)情況下,插值使用雙花括號 ?{{
? 和 ?}}
? 作為定界符。
為了說明插值的工作原理,請考慮一個包含 ?currentCustomer
?變量的 Angular 組件:
currentCustomer = 'Maria';
可以用插值在相應(yīng)的組件模板中顯示此變量的值:
<h3>Current customer: {{ currentCustomer }}</h3>
Angular 會用相應(yīng)組件屬性的字符串值替換掉 ?currentCustomer
?。在這里,它的值是 ?Maria
?。
在以下示例中,Angular 會求出 ?title
?和 ?itemImageUrl
?屬性的值,以顯示一些標(biāo)題文本和圖像。
<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>
模板表達式會產(chǎn)生一個值,它出現(xiàn)在雙花括號 ?{{ }}
? 中。 Angular 解析該表達式并將其賦值給綁定目標(biāo)的某個屬性。目標(biāo)可以是 HTML 元素、組件或指令。
一般來說,括號間的文本是一個模板表達式,Angular 先對它求值,再把它轉(zhuǎn)換成字符串。 下列插值通過把括號中的兩個數(shù)字相加說明了這一點:
<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}.</p>
這些表達式也可以調(diào)用宿主組件的方法,就像下面用的 ?getVal()
?:
<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
通過插值,Angular 執(zhí)行以下任務(wù):
如果你想用別的分隔符來代替 ?
{{
? 和 ?}}
?,也可以通過 ?@Component()
? 元數(shù)據(jù)中的 ?interpolation
?選項來配置插值分隔符。
模板表達式和 JavaScript 很相似。許多 JavaScript 表達式都是合法的模板表達式,但以下情況除外。
你不能使用那些具有或可能引發(fā)副作用的 JavaScript 表達式,包括:
=
?, ?+=
?, ?-=
?, ?...
?)new
?、?typeof
?或 ?instanceof
?等。;
? 或 ?,
? 串聯(lián)起來的表達式++
? 和 ?--
?和 JavaScript 語法的其它顯著差異包括:
|
? 和 ?&
?|
?,??.
? 和 ?!
?插值表達式具有上下文 —— 表達式所屬應(yīng)用中的特定部分。通常,此上下文就是組件實例。
在下面的代碼片段中,表達式 ?recommended
?和 ?itemImageUrl2
?表達式所引用的都是 ?AppComponent
?中的屬性。
<h4>{{recommended}}</h4>
<img [src]="itemImageUrl2">
表達式也可以引用模板上下文中的屬性。
下面的例子就使用了模板輸入變量 ?customer
?。
<ul>
<li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>
接下來的例子使用了模板引用變量 ?#customerInput
?。
<label>Type something:
<input #customerInput>{{customerInput.value}}
</label>
模板表達式不能引用全局命名空間中的任何東西,比如 ?
window
?或 ?document
?。它們也不能調(diào)用 ?console.log
? 或 ?Math.max
?。 它們只能引用表達式上下文中的成員。
表達式求值的上下文是模板變量、指令的上下文對象(如果有的話)以及組件成員的并集。如果所引用的名稱在多個命名空間都有,則 Angular 將應(yīng)用以下邏輯來確定上下文:
為避免變量遮蓋另一個上下文中的變量,請保持變量名稱唯一。在以下示例中,?AppComponent
?模板在問候 ?customer
?Padma。
然后,一個 ?ngFor
?列出了 ?customers
?數(shù)組中的每個 ?customer
?。
@Component({
template: `
<div>
<!-- Hello, Padma -->
<h1>Hello, {{customer}}</h1>
<ul>
<!-- Ebony and Chiho in a list-->
<li *ngFor="let customer of customers">{{ customer.value }}</li>
</ul>
</div>
`
})
class AppComponent {
customers = [{value: 'Ebony'}, {value: 'Chiho'}];
customer = 'Padma';
}
?ngFor
?中的 ?customer
?處于一個 ?<ng-template>
? 的上下文中,所以它指向的是 ?customers
?數(shù)組中的 ?customer
?,在這里是 Ebony 和 Chiho。此列表中不包含 Padma,因為那個 ?
customer
?位于 ?ngFor
?以外的另一個上下文中。反之,?<h1>
? 中的 ?customer
?不包括 Ebony 或 Chiho,因為該 ?customer
?的上下文是組件類,而這個類中 ?customer
?的值是 Padma。
使用模板表達式時,請遵循以下最佳實踐:
盡可能使用屬性名稱或方法調(diào)用。將應(yīng)用和業(yè)務(wù)邏輯保留在組件中,這里更便于開發(fā)和測試。
Angular 會在每個變更檢測周期之后執(zhí)行模板表達式。許多異步活動都會觸發(fā)變更檢測周期,例如解析 Promise、HTTP 結(jié)果、計時器事件、按鍵和鼠標(biāo)移動。
表達式應(yīng)盡快完成,以保持用戶體驗的性能,尤其是在速度較慢的設(shè)備上。
根據(jù) Angular 的單向數(shù)據(jù)流模型,除了目標(biāo)屬性的值之外,模板表達式不應(yīng)更改任何應(yīng)用狀態(tài)。讀取組件值不應(yīng)更改其他顯示值。該視圖應(yīng)在整個渲染過程中保持穩(wěn)定。
冪等表達式能減少副作用
冪等的表達式是最理想的,因為它沒有副作用,并且可以提高 Angular 的變更檢測性能。 用 Angular 術(shù)語來說,冪等表達式總會返回完全相同的東西,除非其依賴值之一發(fā)生了變化。
在單獨的一次事件循環(huán)中,被依賴的值不應(yīng)該改變。 如果冪等的表達式返回一個字符串或數(shù)字,如果連續(xù)調(diào)用它兩次,會返回相同的字符串或數(shù)字。 如果冪等的表達式返回一個對象(包括 ?Date
?或 ?Array
?),如果連續(xù)調(diào)用它兩次,會返回同一個對象的引用。
對于 ?
*ngFor
?,這種行為有一個例外。?*ngFor
? 具有 ?trackBy
?功能,在迭代對象時它可以正確處理對象值的變化。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: