??????? 今天要跟大家分享的是angular2模板中涉及到的數(shù)據(jù)綁定，Angular提供了多種數(shù)據(jù)綁定方式，可以根據(jù)數(shù)據(jù)流動的方向分為三種，詳見下文：
1) 單向：從數(shù)據(jù)源到視圖目標(屬性綁定)，插值DOM元素屬性綁定，HTML標簽特性綁定
2) 單向： 從視圖目標到數(shù)據(jù)源(事件綁定)
3) 雙向綁定
上面介紹了系統(tǒng)的分類，下面將具體介紹詳細的綁定方式
1.插值綁定(使用雙大括號{{ }}的語法)
實現(xiàn)方式：
<div>手機號碼：</div><div>{{detail.telNum}}</div>
當然表達式也可以調(diào)用宿主組件的函數(shù)，例如：
<div>{{detail.getName()}}</div>
2.屬性綁定(使用[])
???????這里詳細的說一下，在屬性綁定中，"="左側(cè)中括號的作用是讓Angular執(zhí)行"="右側(cè)的模板表達式，并將結(jié)果賦值給該目標屬性。如果沒有中括號，Angular就會把"="右側(cè)的模板表達式當做一個字符串常量，而不會計算該字符串，所以如果是賦值給該目標屬性的值是一個字符串，中括號可以省略。
(1)DOM元素屬性綁定
??? 1)實現(xiàn)方式：<img [src]="srcUrl">
?????? 這樣就可以將img標簽的src屬性設(shè)置為組件中的srcUrl值。但是使用[]只能綁定在DOM元素已有的屬性上，例如<div?[src]="srcUr"></div>是會報錯的，以為div不存在src屬性。
??? 2)設(shè)置Angular指令的屬性
???? <div [ngStyle]="styles"></div>
??? 3)還可以使用屬性綁定設(shè)置自定義組件的輸入屬性(這是父子組件間通訊的重要途徑，詳情可以見上篇組件交互的文章)，示例代碼如下：
<user-detail ?[user]="currentUser"></user-detail>
(2) css類綁定
??? 1)<div class="red font14"? [class]="changeGreen"></div>
??? 2)<div class="red font14"? [class.className]="isBlue()">>
這兩者的區(qū)別分別是，第一種當DOM對象屬性綁定給[class]綁定值時，changeCreen會覆蓋這個div元素的全部class。第二種當isBlue()返回值為true時，className這個類添加到該綁定的標簽上，否則移除這個類
(3)Style樣式綁定
HTML標簽內(nèi)聯(lián)樣式可以通過Style樣式綁定的方式來設(shè)置。樣式屬性可以使用烤肉串命名法(font-size),也可以使用駝峰式(fontSize)命名。
<div [style.background-color]="canClick ? 'blue' :'grey' "]></div>
<div [style.font-size.px]="isLarge ? 18 : 13 "></div>
3.事件綁定
事件綁定也是一種單向數(shù)據(jù)綁定方式，數(shù)據(jù)從模板流向組件類。
<div class="edit" (click)="editContact()"></div>
用事件綁定來監(jiān)聽按鈕的點擊事件，只要觸發(fā)點擊事件，就會調(diào)用editContact()方法。其中還有鍵盤事件，鼠標事件，觸屏事件等來執(zhí)行其對應(yīng)綁定的方法。
當然，也可以通過@Output在我們的組件中添加自定義事件，@Output顧名思義就是在子組件中向父組件輸出東西(這里就不細講了，想了解的朋友可以看看組件交互那一塊)。
4.雙向綁定
Angular2是通過[()]來實現(xiàn)的，例如<input [(ngModel)]="value">就是雙向綁定input元素的值。但是需要注意的是[()]只能綁定在有輸入輸出功能的DOM元素上(例如：input、textare)，如果綁定在div這樣的元素上就會報錯。
那么，如何通過[()]在我們自定義的指令上實現(xiàn)雙向綁定呢？沒錯，就是使用@Input和@Output來實現(xiàn)。
//父組件
?@Component({
selector: 'my-app',
?? template:?????????
`<customer-counter [(counter)] = "someValue"></customer-counter>
<p> value: {{someValue}}</p>`,
directives:[CustomerCounterComponent] })
export class AppComponent{
someValue = 3;
?}
//子組件
?@Component({
selector: 'customer-counter',
template: `
<button (click)="decrement()">-</button>
<span>{{counter}}</span>`
})
export class CustomerCounterComponent{
counterValue = 0;
@Input()
?get counter(){
?return this.counterValue;
?}
@Output()
?counterChange = new EventEmitter();
?set counter(val) {
????? this.counterValue = val;
???? ?this.counterChange.emit(this.counterValue);
}
decrement() { this.counter--; } }
這樣<customer-counter [(counter)] = "someValue"></customer-counter >就可以將父組件中的someValue綁定到子組件的counter屬性上，同時當子組件的counter屬性發(fā)生改變時也更新父組件的someValue值。
需要注意的是，我們定義的事件監(jiān)聽是counterChange，而使用的確實[(counter)]。這是因為Angular 2中約定添加后綴Change，也就是[(counter)]等價于[change]和(counterChange)的組合。如果去看[(ngModel)]的實現(xiàn)，你也會發(fā)現(xiàn)它是[ngModel]和[ngModelChange]的組合。
今天更新就到這里，謝謝
