Angular 文本插值

2022-06-30 09:31 更新

文本插值

文本插值允許你將動態(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ù):

  1. 計算所有位于雙花括號中的表達式。
  2. 將這些表達式的結(jié)果轉(zhuǎn)換為字符串。
  3. 將這些結(jié)果融入相鄰的字符串文本中。
  4. 將融合后的結(jié)果賦值給元素或指令的屬性。

如果你想用別的分隔符來代替 ?{{? 和 ?}}?,也可以通過 ?@Component()? 元數(shù)據(jù)中的 ?interpolation ?選項來配置插值分隔符。

語法

模板表達式和 JavaScript 很相似。許多 JavaScript 表達式都是合法的模板表達式,但以下情況除外。

你不能使用那些具有或可能引發(fā)副作用的 JavaScript 表達式,包括:

  • 賦值 (?=?, ?+=?, ?-=?, ?...?)
  • 運算符,比如 ?new?、?typeof ?或 ?instanceof ?等。
  • 使用 ?;? 或 ?,? 串聯(lián)起來的表達式
  • 自增和自減運算符:?++? 和 ?-- ?
  • 一些 ES2015+ 版本的運算符

和 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)用以下邏輯來確定上下文:

  1. 模板變量的名稱。
  2. 指令上下文中的名稱。
  3. 組件成員的名稱。

為避免變量遮蓋另一個上下文中的變量,請保持變量名稱唯一。在以下示例中,?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ā)和測試。

  • 快速執(zhí)行
  • 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 ?功能,在迭代對象時它可以正確處理對象值的變化。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號