關於Angular的屬性綁定，[]和{{}}的差別

當咱們查看Angular的代碼，須要給屬性綁定一個變量時，一會用 [property]="variable"，一會用 property="{{variable}}"，有時候還有 [attr.property]，究竟他們有什麼區別？

先把結論擱在這
Angular 官方文檔在綁定屬性幾乎都是使用[]，而插值表達式{{}}更可能是用於顯示，二者最大的區別就是後者會將{{}}語句裏執行完的值再轉換string 類型。

[] & {{}}

---

實踐是檢驗真理的惟一標準，先寫一個簡單的測試component

@Component({
    selector: 'my-here',
    template: `<br>2333333333333333{{here}}`
})
export class HereComponent {
    @Input() here: any;
    @Input() whichone: string;

    ngOnChanges(change){
        console.log(this.here)
        console.log(change)
    }
}

使用它

<my-here [herestr]="poo" [whichone]="'[]'"></my-here>
---------------------------
<my-here herestr="{{poo}}" [whichone]="'{}'"></my-here>

poo是一個string，而且咱們經過input 或者button 改變poo 的值，二者在頁面的顯示和在控制檯的打印都正常，看起來並無差別。
但是咱們發現，當poo 還沒賦值的時候，前者打印是的undefined，後者是''空字符串，估計是後者把undefined 換成''，卻又並非單純的轉換類型，由於undefined 轉string 的話應該是字面量'undefined'，可是能夠肯定的是經過{{}}得到的必定是string 類型。

試試給poo 送一個object，{{}}獲得的是"[object Object]"，證明了咱們的猜測。

[attr.Attribute] 和 基本屬性

---

那Angular 裏還有一種attribute 綁定，寫法是[attr.Attribute]="variable"，那這個[property]="variable"又有什麼區別呢？
首先咱們得搞清楚Dom的property(屬性) 和 attribute(特性)，簡單來講

• property指的是DOM中的屬性，是JavaScript裏的對象；
• attribute指的是HTML標籤上的特性，它的值只可以是字符串；
• DOM中的有一個attribute的屬性，其中就是html標籤上的特性列表；
• 二者之間的數據綁定是單向的，更改attribute會同步到property，但反之則否則；
• 更改property和attribute的值，都會將更新反映到HTML頁面中；

<div id="test"></div>

例若有一個element var testElm = document.getElementById('test')
這個element 的id 特性是 testElm.getAttribute('id')，而它的id 屬性是testElm.id
DOM element 只有基本特性會有一一對應的屬性，例如id、title等，若是咱們添加一個自定義特性diy

<div id="test" diy="whatever"></div>

那麼testElm.getAttribute('diy')或者testElm.attributes[1]就是它的diy 特性，可是它並無對應的diy 屬性，一樣狀況的還有一些ARIA attribute 和table 中的colspan/rowspan。

ARIA指可訪問性，用於給殘障人士訪問互聯網提供便利

對於自定義屬性，H5有一個data-* 的特性，例如

div id="test" data-diy="whatever"></div>

它的特性就是 testElm.getAttribute('diy')，而對應的屬性則是 testElm.dataset.diy

ok，說回Angular，因爲element沒有這些屬性，中括號[]的屬性綁定語法天然不行，並且編譯模板時會報錯，因此對於非基本屬性，Angular 提供了這種[attr.Attribute]="variable" 的特性綁定語法。

by the way，當property是基本屬性時，使用[property]="variable"綁定屬性，而後改變variable 的值，對應的attribute也會跟着屬性同步，Angular應該是作了屬性和特性的數據雙向綁定的工做
因此只有property是基本屬性，二者同樣，例如[id]和[attr.id]的做用並沒有區別。

END and PS

---

道理我都懂，但爲何鴿子辣麼大.....這有什麼用呢，emmmmmm固然有，最多見的就是[property]="false"和property="{{false}}"的差別，後者其實綁定的是'false'，一旦作if語句就有問題。

綜上所訴，屬性綁定最好仍是用中括號，雙大括號用於展現，如<div>{{obj | json}}</div>，實際上，在渲染視圖以前，Angular 把這些插值表達式翻譯成相應的屬性綁定。
還有就是，它依然能夠用於執行Angular的模板語法，例如property="{{fun()}}"，property="{{a?b:c}}"，只是它會作多一步：把return的值轉換成string。

說到attribute 和 property，記錄個坑，Input標籤的maxlength 特性對應的是maxLength 屬性，即便特性寫成大寫maxLength 以下，瀏覽器解析出來的依然是<input maxlength="10" />

<input maxLength="10" />

因此寫成[attr.maxlength]、[attr.maxLength]、[maxLength]都是能夠，可是[maxlength]就不行，minlength/minLength同樣。

Angular模板語法
DOM 中 Property 和 Attribute 的區別