Angular2 的屬性綁定

前言

    當要把視圖元素的屬性 (property) 設置爲模板表達式時，就要寫模板的屬性 (property) 綁定。

    Angular的屬性綁定是單向數據綁定，由於值的流動是單向的，從組件的數據屬性流動到目標元素的屬性。
    對於屬性綁定,強調如下幾點:

• 不可使用屬性綁定來從目標元素拉取值
• 不能夠從綁定目標元素的屬性來讀取它
• 不可使用元素綁定來調用目標元素上的方法
• 你只能夠設置屬性綁定.

    若是這個元素觸發了事件，能夠經過事件綁定來監聽它們。
    若是必須讀取目標元素上的屬性或調用它的某個方法，得用另外一種技術。 參見 API 參考手冊中的 ViewChild和 ContentChild。

屬性綁定的方式

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>僅供學習。