Angular2模板語法總結

一、模板語法

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

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

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

---

1、綁定語法：概覽

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

2、綁定目標

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

3、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]。
一、[style.propertyName]，如：

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

二、[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綁定相似，
一、[class.className]

二、[ngClass]