本文內容

本文內容為閱讀官方文件有關interpolation 的筆記內容。

利用 interpolation 展示內容

在 Angular 中，預設 interpolation 的寫法為雙花括 {{ }} ，中間夾著想要被展示的內容。
假設今天在 app.component.ts 中定義一個屬性 title

--- app.component.ts ---
import { Component } from '@angular/core';

@Component({
  // ...
})
export class AppComponent {
  title = 'Jasper';
}

接著，利用 interpolation 將 title 的內容呈現在畫面上

--- app.component.html ---
<h2> {{ title }} </h2>

如此，就可以將 Jasper 的內容呈現在畫面上囉。

Template expressions - 樣板表達式

樣板表示式會產出一個值且這個值出現在的位置就是 {{}} 將它包起來的地方。Angular 會將解析出來的結果指定給其繫結的元素，這個元素有可能是一個 HTML 元素、元件 ... 等等。

解析樣板表示式中的內容

在 interpolation 中我們可以放運算式在裡面

<p> 1 plus 1 is {{ 1 + 1 }}</p> // 結果為: 1 plus 1 is 2

另外，也可以在 interpolation 裡面擺函式將其結果傳入其中

--- app.component.ts ---
getVal() {
  return 2
}

--- app.component.html ---
<p> 1 plus 1 is {{ getVal() }}</p> // 結果為: 1 plus 1 is 2

Note:
Angular 會將雙花括中的結果轉成字串型別。

Syntax

在 angular 中的樣板表達式中，有些 Javascript 具有衍生意義的運算子是不能用的，
像是:

1. =, +=
2. new, typeof

之類的語法是不能在樣板表達式中被使用，在官方文件 有說明。

Summary

這邊做個總結

1. 可以利用interpolation 雙花括 {{ }}，來將元件定義的屬性內容呈現到畫面上。
2. 在 {{ }} 中，可以放入運算式和函式的。
3. Angular 會自動將雙花括的結果轉為字串型別
4. 要注意某些具有衍生功能的 Javascript 運算原是不能在 interpolation 中被使用的。