Angular2模板語法總結

1、模板語法

• 1、插值表達式 ( {{...}} ) 如：<span> {{data.title}}</span>
• 2、模板表達式（[property]=“expression”） 模板表達式產生一個值。 JavaScript
  中那些具有或可能引發副作用的表達式是被禁止的，包括： 賦值 (=, +=, -=, ...) new 運算符
  使用 ; 或 , 的鏈式表達式 自增和自減運算符：++ 和 --
• 3、模板語句（(event)="statement"） 模板語句用來響應由綁定目標（如 HTML 元素、組件或指令）觸發的事件。
  如：<button (click)="delete ()">Delete </button>

• 4、雙向數據綁定 ( [(...)]

        <input [(ngModel)]=“name"> )
        
  

---

一、綁定語法：概覽

• Angular 提供了各種各樣的數據綁定，本章將逐一討論。 先從高層視角來看看 Angular 數據綁定及其語法。
  綁定的類型可以根據數據流的方向分成三類： 從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。

二、綁定目標

數據綁定的目標是 DOM 中的某些東西。 這個目標可能是（元素 | 組件 | 指令的）property、（元素 | 組件 | 指令的）事件，或(極少數情況下) attribute 名。 下面是的彙總表：

三、attribute、class 和 style 綁定

• 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。

• CSS 綁定

藉助 CSS 類綁定，可以從元素的 class attribute 上添加和移除 CSS 類名。

CSS 類綁定綁定的語法與屬性綁定類似。 但方括號中的部分不是元素的屬性名，而是由class前綴，一個點 (.)和 CSS 類的名字組成， 其中後兩部分是可選的。形如：[class.class-name]。
1、[style.propertyName]，如：

  <p [style.fontSize]="fontSize">CSS 綁定方式1</p>
  

2、[ngStyle]
所以上面的例子，我們就可以直接使用[ngStyle]來動態綁定button的font-size和margin。如：

  <p  [ngStyle]="PStyle">CSS 綁定方式2</p>
  private PStyle: any = {
     margin: "10px",
     fontSize: "2em"
 }; 

3[class.className]使用這種方式，我們可以根據綁定變量的值來動態添加或者移除css class。

• CLASS 綁定

class綁定跟css綁定類似，
1、[class.className]

2、[ngClass]