「原來如此！這樣有比較看得懂了！基本上裝飾器就是決定類別要扮演的角色，中繼資料則是把這個角色需要的資料傳入，然後 Angular 就會幫忙把其他的事情處理好的意思。」Wayne 喃喃說道。

「大致上是這樣沒錯！然後我跟你說...」

Template 語法

還記得我們在 MRTStationList 的 Template 是怎麼寫的嗎？

<table>
  <thead>
    <tr>
      <th></th>
      <th>列車進入月台車站之站名</th>
      <th>行駛目的地</th>
      <th>資料更新日期</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of list; index as i">
      <td>{{ i + 1 }}</td>
      <td>{{ item.Station }}</td>
      <td>{{ item.Destination }}</td>
      <td>{{ item.UpdateTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
    </tr>
  </tbody>
</table>

相信大家早就知道，Angular 的 Template 是由 HTML 再加上一些 Angular 特有的符號或屬性組成的。而這樣些特殊的符號或屬性，我們稱其為 Template 語法 。

以上述的例子來說：

• *ngFor－它就像一般程式裡常用到的 for-loop 一樣，當我們將資料交給它時，它就會將它所在的 HTML 元素的位置跟資料筆數逐筆產生出來。

• {{ }}－之前有提到過，這是一種資料綁定的方式。

• date: 'yyyy-MM-dd HH:mm:ss'－這之前也有提到過，這叫做 pipe （管道） 。可以將其想像成，當資料經過這個管道流出來之後，會變成另一種資料或資料格式。

當然還有其他的 Template 語法，不過就留待我們之後用到時再一併解說吧！

資料綁定

想想我們以前在使用 jQuery 的時候，如果要寫一個互動式的頁面，我們要自己寫程式操作 DOM，把資料取出來處理之後再更新回去。但這樣的程式碼既冗長又無趣、容易出錯又難以閱讀。好在現在有 Angular 的資料綁定幫我們處理這些事。

在 Angular 中，資料綁定的方式大致上可以分成以下四種：

第一種是最簡單的插值表達式。箭頭由右到左代表資料的流向是將 Component 裡的資料放到 DOM 裡；而只有一個箭頭則代表單向綁定。

第二種方式我們稱之為屬性綁定。箭頭一樣是由右至左，且只有一個箭頭。這個方式是透過在 HTML 的元素上加上 [propertyName] 來達成資料綁定的目的。

第三種方式叫做事件綁定。箭頭由左到右，表示資料是從 DOM 流向 Component；只有一個箭頭，一樣是單向綁定。從圖中其實就看得出來，此方式是透過 event 與 handler 來達到資料傳遞的目的，只要在 HTML 的元素上加上 (event)="handler($event)" 即可在 Component 裡取得傳回來的資料。

最後一種綁定方式比較特別，兩個箭頭表示這個綁定方式是雙向綁定，其主要是透過 Angular 裡的一個叫做 Template-Driven Form 的方式來達成雙向綁定的效果。使用方式是在 HTML 元素上加上 [(ngModel)]="property" 即可從 Component 將資料綁定進去，且在使用者有修改其值時，即時將資料設定回去。

值得一提的是，其實雙向綁定的原理是透過屬性綁定與事件綁定達成。為什麼？因為它其實可以拆開來，像是這樣：

<!-- 雙向綁定 -->
<input [(ngModel)]="property">

<!-- 屬性綁定 -->
<input [ngModel]="property">

<!-- 事件綁定 -->
<input (ngModelChange)="handler($event)">

不過如果是較單純的情況，還是寫成 [(ngModle)]="property" 比較適合。

隔壁棚的「Angular 大師之路」也有提到，點我學更多！

我們來整理一下資料的流向：

Component 透過屬性綁定的方式將資料傳進 Template 裡；Template 則是透過事件綁定的方式將資料傳回 Component。

不單單只有 Component 跟 Template 之間可以用這樣的方式來做資料的處理，父層 Component 跟子層 Component 之間其實也是透過這樣的方式來做資料上的傳遞。