文章內容

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

Expression context

一般狀況，interpolation 都會用來呈現某個元件它自己擁有的成員屬性，像下面這樣，假若 app.component 擁有一個叫做 title 的成員屬性，我們利用 interpolation 將它呈現在畫面上

@Component({
  // ...
})
export class BannerComponent implements OnInit {
  title = 'Jasper'
}

<h2> {{ title }} </h2>  // 呈現 Jasper 內容

interpolation 除了上面這種用法以外，還可以用來呈現某個樣板內容的屬性，這個樣板內容有可以是 template input variable 的屬性或者是一個 template reference variable 的屬性。

template input variable 的屬性

下面的範例就是利用 interpolation 來呈現 template input variable 的屬性。

<ul>
  <li *ngFor="let customer of customers"> {{ customer.name }}</li>
</ul>

像上面的範例，customer 就是我們的 template ，假若今天它有一個 name 屬性，如此，我們就可以透過 interpolation 在裡面使用物件調用它的屬性的方式 customer.name，如此一來，就可以呈現它的屬性內容囉。

template reference variable 的屬性

<label>Type something:
  <input #customerInput>{{customerInput.value}}
</label>

上面的範例，我們宣告一個 #customerInput 可以取得這個 input 欄位。接著，再透過 interpolation 來呈現此 input 欄位的 value 內容。

防止名稱命名上的衝突

當有多個區域的變數名稱有衝突，則 Angular 會以以下的邏輯來區別它們

1. 樣板變數的名稱
2. 在 directive 中的名稱
3. 元件的成員屬性的名稱

這邊舉個樣板變數和元件的成員屬性名稱彼此衝突的狀況

<h1> {{ customer }} </h1>
<ul>
  <li *ngFor="let customer of customers"> {{ customer.name }}</li>
</ul>

class AppComponent {
  customers = [{name: 'Tiffany'}, {name: 'Jared'}];
  customer = 'Jasper';
}

上面的例子中，在 *ngFor 中的 customer 就是屬於樣板變數的情況，依據上面列出的 Angular 區別出它的邏輯所以，這邊的內容會呈現 Tiffany 和 Jared 而不會是 Jasper。而在 h1 中的 customer 是屬於元件的成員屬性，所以，Angular 可以區別出它是從哪裡來。所以，以上的變數名稱酸然有衝突，但 Angular 還是能依照他的判斷邏輯來區分出它們是屬於哪個區域的變數，而不會發生衝突錯誤。

Summary

這邊做個總結

1. interpolation 中，可以使用像是 template input variable 或是 template refernce variable 這種變數的屬性，來將其內容呈現在畫面上。
2. Angular 會依照它辨識該變數在哪裡被定義來呈現它的內容，不會因為在同一篇內容的上下文中有相同的變數而馬上就抱錯，但是!! 這樣的習慣是不被建議的，還是建議變數都只有專屬於它的變數名稱，這樣才不容易被搞混，也比較好除錯。