文本插值

文本插值允許你將動態(tài)字符串值合并到 HTML 模板中。通過插值，你可以動態(tài)更改應用視圖中顯示的內容，例如顯示包含用戶名的自定義問候語。

要了解本指南中涉及的語法和代碼片段，請參閱 現(xiàn)場演練 / 下載范例。

使用插值語法顯示值

插值是指將表達式嵌入到被標記的文本中。默認情況下，插值使用雙花括號 ?{{? 和 ?}}? 作為定界符。

為了說明插值的工作原理，請考慮一個包含 ?currentCustomer ?變量的 Angular 組件：

currentCustomer = 'Maria';

可以用插值在相應的組件模板中顯示此變量的值：

Current customer: {{ currentCustomer }}

Angular 會用相應組件屬性的字符串值替換掉 ?currentCustomer?。在這里，它的值是 ?Maria?。

在以下示例中，Angular 會求出 ?title ?和 ?itemImageUrl ?屬性的值，以顯示一些標題文本和圖像。

{{title}}

模板表達式

模板表達式會產生一個值，它出現(xiàn)在雙花括號 ?{{ }}? 中。 Angular 解析該表達式并將其賦值給綁定目標的某個屬性。目標可以是 HTML 元素、組件或指令。

用插值解析表達式

一般來說，括號間的文本是一個模板表達式，Angular 先對它求值，再把它轉換成字符串。 下列插值通過把括號中的兩個數(shù)字相加說明了這一點：

The sum of 1 + 1 is {{1 + 1}}.

這些表達式也可以調用宿主組件的方法，就像下面用的 ?getVal()?：

The sum of 1 + 1 is not {{1 + 1 + getVal()}}.

通過插值，Angular 執(zhí)行以下任務：

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

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

語法

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

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

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

和 JavaScript 語法的其它顯著差異包括：

• 不支持位運算，比如 ?|? 和 ?& ?
• 新的模板表達式運算符，例如 ?|?，??.? 和 ?!?

表達式上下文

插值表達式具有上下文 —— 表達式所屬應用中的特定部分。通常，此上下文就是組件實例。

在下面的代碼片段中，表達式 ?recommended ?和 ?itemImageUrl2 ?表達式所引用的都是 ?AppComponent ?中的屬性。

{{recommended}}

表達式也可以引用模板上下文中的屬性。

下面的例子就使用了模板輸入變量 ?customer?。

  
{{customer.name}}

接下來的例子使用了模板引用變量 ?#customerInput?。

Type something:
  {{customerInput.value}}

模板表達式不能引用全局命名空間中的任何東西，比如 ?window ?或 ?document?。它們也不能調用 ?console.log? 或 ?Math.max?。 它們只能引用表達式上下文中的成員。

防止命名沖突

表達式求值的上下文是模板變量、指令的上下文對象（如果有的話）以及組件成員的并集。如果所引用的名稱在多個命名空間都有，則 Angular 將應用以下邏輯來確定上下文：

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

為避免變量遮蓋另一個上下文中的變量，請保持變量名稱唯一。在以下示例中，?AppComponent ?模板在問候 ?customer ?Padma。

然后，一個 ?ngFor ?列出了 ?customers ?數(shù)組中的每個 ?customer?。

@Component({
  template: `
    

      
      
Hello, {{customer}}
      

        
        
{{ customer.value }}
      
    
  `
})
class AppComponent {
  customers = [{value: 'Ebony'}, {value: 'Chiho'}];
  customer = 'Padma';
}

?ngFor ?中的 ?customer ?處于一個 ?? 的上下文中，所以它指向的是 ?customers ?數(shù)組中的 ?customer?，在這里是 Ebony 和 Chiho。此列表中不包含 Padma，因為那個 ? customer ?位于 ?ngFor ?以外的另一個上下文中。反之，?

? 中的 ?customer ?不包括 Ebony 或 Chiho，因為該 ?customer ?的上下文是組件類，而這個類中 ?customer ?的值是 Padma。

表達式最佳實踐

使用模板表達式時，請遵循以下最佳實踐：

• 使用短表達式

盡可能使用屬性名稱或方法調用。將應用和業(yè)務邏輯保留在組件中，這里更便于開發(fā)和測試。

• 快速執(zhí)行

Angular 會在每個變更檢測周期之后執(zhí)行模板表達式。許多異步活動都會觸發(fā)變更檢測周期，例如解析 Promise、HTTP 結果、計時器事件、按鍵和鼠標移動。

表達式應盡快完成，以保持用戶體驗的性能，尤其是在速度較慢的設備上。

• 沒有可見的副作用

根據(jù) Angular 的單向數(shù)據(jù)流模型，除了目標屬性的值之外，模板表達式不應更改任何應用狀態(tài)。讀取組件值不應更改其他顯示值。該視圖應在整個渲染過程中保持穩(wěn)定。

冪等表達式能減少副作用

冪等的表達式是最理想的，因為它沒有副作用，并且可以提高 Angular 的變更檢測性能。 用 Angular 術語來說，冪等表達式總會返回
完全相同的東西，除非其依賴值之一發(fā)生了變化。

在單獨的一次事件循環(huán)中，被依賴的值不應該改變。 如果冪等的表達式返回一個字符串或數(shù)字，如果連續(xù)調用它兩次，會返回相同的字符串或數(shù)字。 如果冪等的表達式返回一個對象（包括 ?Date ?或 ?Array?），如果連續(xù)調用它兩次，會返回同一個對象的引用。

對于 ?*ngFor?，這種行為有一個例外。?*ngFor? 具有 ?trackBy ?功能，在迭代對象時它可以正確處理對象值的變化。

當前標題：創(chuàng)新互聯(lián)Angular教程：Angular文本插值
文章位置：http://m.5511xx.com/article/djcidsp.html