iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

新新新手閱讀 Angular 文件30天系列 第 14

新新新手閱讀 Angular 文件 - Interpolation(2) - Day14

文章內容

本章內容為閱讀官方文件有關 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 會依照它辨識該變數在哪裡被定義來呈現它的內容,不會因為在同一篇內容的上下文中有相同的變數而馬上就抱錯,但是!! 這樣的習慣是不被建議的,還是建議變數都只有專屬於它的變數名稱,這樣才不容易被搞混,也比較好除錯。

上一篇
新新新手閱讀 Angular 文件 - Interpolation(1) - Day13
下一篇
新新新手閱讀 Angular 文件 - ngClass - Day15
系列文
新新新手閱讀 Angular 文件30天30

尚未有邦友留言

立即登入留言