前言

    當要把檢視元素的屬性 (property) 設定為模板表示式時，就要寫模板的屬性 (property) 繫結。

    Angular的屬性繫結是單向資料繫結，因為值的流動是單向的，從元件的資料屬性流動到目標元素的屬性。
    對於屬性繫結,強調以下幾點:

• 不可以使用屬性繫結來從目標元素拉取值
• 不可以從繫結目標元素的屬性來讀取它
• 不可以使用元素繫結來呼叫目標元素上的方法
• 你只可以設定屬性繫結.

    如果這個元素觸發了事件，可以通過事件繫結來監聽它們。
    如果必須讀取目標元素上的屬性或呼叫它的某個方法，得用另一種技術。 參見 API 參考手冊中的 ViewChild

屬性繫結的方式

1. 使用[]進行繫結
2. 使用bind-進行繫結

    以繫結DOM屬性到元件為例：

        目標屬性被[]包裹著。
        元件屬性被""包裹著。
現在你只需要知道：

<img [src]="heroImageUrl">

等同於

<img bind-src="heroImageUrl">

屬性繫結的用法

    用法1：
        繫結DOM屬性到元件
        語法：
            <htmlElement [DOM屬性]='元件的屬性'> </htmlElement>

<img [src]="heroImageUrl">

        在這個例子中image 元素的src屬性會被繫結到元件的heroImageUrl屬性上。

    用法2：
        繫結指令屬性到元件
        語法：
            <htmlElement [指令屬性]='元件的屬性'> </htmlElement>
        舉例：

<div [ngClass]="classes">[ngClass] binding to the classes property</div>
 

        Angular 會先去看這個名字是否是某個已知指令的屬性名，然再去看是否為DOM屬性。

        嚴格來說，Angular 正在匹配指令的輸入屬性的名字。 這個名字是指令的inputs陣列中所列的名字，或者是帶有@Input()裝飾器的屬性。 這些輸入屬性被對映為指令自己的屬性。
        在這個例子中，ngClass指令屬性會被繫結到元件的class`屬性上

    注意：
        如果名字沒有匹配上已知指令或元素的屬性，Angular 就會報告“未知指令”的錯誤。

    用法3：
        繫結自定義元件的模型屬性
        語法：
            <user-defined-tag [指令屬性]='元件的屬性'> </user-defined-tag>
        舉例：

<hero-detail [hero]="currentHero"></hero-detail>

    用法4：
        屬性繫結和插值表示式
        很多情況下，使用插值表示式跟屬性繫結的效果相同：

<img src="{{heroImageUrl}}"> 

等效於

<img [src]="heroImageUrl">

        但是這種情況僅僅存在於資料型別是字串時，如果是其他資料型別，就必須使用屬性綁定了。

attribute繫結(特性繫結)

    attribute和property都可以翻譯成屬性。但是前面所說的屬性繫結是Property binding，而這裡說的是ttribute繫結。

    小紅書對這兩個單詞有不同的翻譯，用以區別不同：

        Property——屬性
        attribute——特性

    簡單的理解:

        Attribute就是DOM節點自帶的屬性，例如html中常用的id、class、title、align.

        Property是這個DOM元素作為物件，其附加的內容, 例如childNodes、firstChild.

    注意：
        常用的Attribute，例如id、class、title等，已經被作為Property附加到DOM物件上，可以和Property一樣取值和賦值。但是自定義的Attribute，就不會有這樣的特殊優待。

    因此，當元素沒有屬性可綁的時候，就必須使用 attribute 繫結。
    考慮 ARIA， SVG 和 table 中的 colspan/rowspan 等 attribute。它們是純粹的 attribute，沒有對應的屬性可供繫結。

    如果想寫出類似下面這樣的東西，現狀會令我們痛苦：

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

會得到這個錯誤：

Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
（模板解析錯誤：不能繫結到 'colspan'，因為它不是已知的原生屬性）

    正如提示中所說，元素沒有colspan屬性。它只有colspan特性，但是插值表示式和屬性繫結只能設定屬性，並不能設定特性attribute。

attribute 繫結

    我們需要attribute 繫結來建立和繫結到這樣的 attribute。

    attribute 繫結的語法與屬性繫結類似。
    但方括號中的部分不是元素的屬性名，而是由attr字首，一個點 (.) 和attribute 名字組成。 可以通過值為字串表示式來設定 attribute 的值。

    這裡把[attr.colspan]繫結到一個計算值：

<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>

這裡是表格渲染出來的樣子：

    attribute 繫結的主要用例之一是設定 ARIA attribute（譯註：ARIA指可訪問性，用於給殘障人士訪問網際網路提供便利）， 就像這個例子中一樣：

<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>