Angular4學習筆記——數據綁定

數據綁定整體而言有三種類型：

1. {{...}} 插值表達式綁定
2. 屬性綁定（包括property和attitude
3. 事件綁定

插值表達式綁定

既能夠寫在html結構中，也能夠寫在標籤中

<p>My current hero is {{currentHero.name}}</p>
<img src="{{heroImageUrl}}" style="height:30px">

屬性綁定：[屬性名]

// 元素屬性設置爲組件屬性的值,image 元素的src屬性會被綁定到組件的heroImageUrl屬性上
<img [src]="heroImageUrl">
// 設定自定義組件的模型屬性（這是父子組件之間通信的重要途徑）
<app-hero-detail [hero]="currentHero"></app-hero-detail>

注意別忘了[]，忘記了[]，則相應屬性就被綁定到了字符串上，而不是背後所表明的值。
有時候也能夠經過插值表達式實現同樣的效果

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

Attribute綁定

當元素沒有屬性（native property)可綁的時候，就必須使用 attribute 綁定，例如<td>元素沒有colspan屬性,可是插值表達式和屬性綁定只能設置屬性，不能設置 attribute，這時咱們便須要使用到attribute綁定來替咱們解決這個問題。
若是對property和attribute有所疑惑，可經過下面的文字先作一個區分梳理：
attribute初始化DOM property，而後它們的任務就完成了，property的值能夠改變；attribute 的值不能改變。
例如，當瀏覽器渲染<input type="text" value="abc">時，它將建立相應DOM 節點，其value property被初始化爲「abc」。當用戶在輸入框中輸入「abcwwww」時，DOM元素的value property變成了「abcwwww」。可是這個HTML value attribute保持不變。若是咱們讀input元素的attribute，就會發現確實沒變：input.getAttribute('value') // 返回 "abc"。

因此，在Angular的世界中，attribute惟一的做用是用來初始化元素和指令的狀態。 當進行數據綁定時，只是在與元素和指令的property和事件打交道，而attribute就基本上靠邊站了，只有比較特殊的狀況纔會用到他。

具體綁定格式以下：

<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

Class綁定和Style綁定

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

// 替換型綁定：即當 badCurly 有值時class的值會被徹底替換成一個badCurly.
<div class="bad curly special"
    [class]="badCurly">Bad curly</div>
// 增減類綁定：綁定到特定的類名
<div [class.special]="isSpecial">The class binding is special</div>

若是要同時替換多個class，使用ngClass指令綁定到一個對象上是更好的選擇：經過修改currentClasses的值能夠同時修改1/n個class.

<div [ngClass]="currentClasses">xxxx</div>

經過樣式綁定，能夠設置內聯樣式，樣式屬性命名方法能夠用中線命名法，也能夠用駝峯式命名法，如fontSize。

<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
// 單位也寫在方括號裏，這個很方便啊
<button [style.font-size.px]="isSpecial ? 30 : 12" >Big</button>

一樣也能夠經過ngStyle指令把內聯樣式綁定到一個對象上。

<div [ngStyle]="currentStyle">xxxx</div>

事件綁定：(事件名)

事件綁定分爲對原生DOM事件綁定和自定義事件綁定。原生事件能夠經過$event訪問事件對象，它有像target和target.value這樣的屬性。

// 事件綁定監聽按鈕的點擊事件。每當點擊發生時，都會調用組件的onSave()方法。
<button (click)="onSave()">Save</button>
// 當input值發生改變時，自動更新currentHero.name的值
<input (input)="currentHero.name=$event.target.value">

自定義事件和Vue的處理方法很相像。

// （子）組件定義了deleteRequest屬性，它是EventEmitter實例
deleteRequest = new EventEmitter<Hero>();
// 當觸發delete事件時，指令調用EventEmitter.emit(payload)來觸發事件
delete() {
  this.deleteRequest.emit(this.hero);
}
// (父）組件監聽到了deleteRequest事件就調用deleteHero方法，並經過$event對象來訪問載荷this.hero
<app-hero-detail (deleteRequest)="deleteHero($event)"></app-hero-detail>

雙向數據綁定： [(...)]

雙向綁定實質上是屬性綁定和事件綁定的語法糖。

// 在沒有雙向綁定以前可能須要這樣寫
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
// 但有了雙向綁定以後，只須要這樣就好了
<app-sizer [(size)]="fontSizePx"></app-sizer>

父子組件之間能夠經過EventEmitter來進行操做，原生html元素就須要依賴自身的值變化事件了，但即便能夠操做這樣寫也不夠優雅，所幸咱們能夠經過[(ngModel)]指令來完成。值得注意的是，這種指令也只是針對表單元素，對於組件仍是須要使用前文說起的雙向綁定語法。
還有一點是，表單元素使用過程會須要一些注意的地方，還請查看錶單相關文檔/稍後寫的文章，下面代碼僅做爲語法示例。

<input [(ngModel)]="currentHero.name">

文章先寫到這吧，還有一些其餘的工具和數據綁定關係不算特別大就放在其餘筆記中啦~~

前端新人，寫的不對的地方還請指出；若是以爲對你有幫助，能夠點個贊鼓勵一下我哦！~~