通常來說，數據綁定要么是從頁面流向組件中的數據，要么是從組件中的數據流向頁面。下面我們來介紹在Angular 2中數據綁定的幾種不同方式。?
1. 使用{{}}將組件中的數據顯示在html頁面上?
　　實現方式：<div>{{value}}</div>?
　　這樣就可將組件中的value值顯示在div元素上。?
2. 使用[]DOM元素的屬性值設置為組件中的數據?
　　實現方式：<img [src]="srcUrl">?
　　這樣就可以將img標簽的src屬性設置為組件中的srcUrl值。但是使用[]只能綁定在DOM元素已有的屬性上，例如<div [src]="srcUrl"></div>是會報錯的，以為div不存在src屬性。?
　　但是，可以通過自定義的方式使用@Input為我們的指令添加屬性，這也是實現從父子組件數據通信的一種方式，顧名思義就是@Input定義的屬性值是從父組件中獲取的。?
　　下面我們來介紹使用@Input實現數據綁定。

//父組件
@Component({selector: 'my-app',template: `<customer-counter [counter] = "someValue"></customer-counter>`,directives:[CustomerCounterComponent]
})export class AppComponent{someValue = 3;
}//子組件
@Component({selector: 'customer-counter',template: `<span>{{counter}}</span>`
})export class CustomerCounterComponent{counterValue = 0;@Input()get counter(){return this.counterValue;}
}

　　這樣<customer-counter [counter] = "someValue"></customer-counter>就可以將父組件中的someValue數據綁定在子組件的counter屬性上了。?
3. 事件綁定?
　　事件綁定就是通過用戶的交互行為來觸發DOM元素的事件。?
　　例如：<button (click)="onClickMe()">點我!</button>?
　　當用戶點擊button是就會觸發onClickMe()方法，這樣實現的前提是button能夠監聽click方法。?
　　當然，也可以通過@Output在我們的組件中添加自定義事件，@Output顧名思義就是在子組件中向父組件輸出東西。?
　　具體實現如下：

//父組件
@Component({selector: 'my-app',template: `<customer-counter (counterChange) = "changeValue($event)"></customer-counter> <div>{{someValue}}</div>`,
    directives:[CustomerCounterComponent]
})export class AppComponent{someValue = 3;changeValue(val){this.someValue = val;}
}//子組件
@Component({selector: 'customer-counter',template: `<button (click)="decrement()">-</button>`
})export class CustomerCounterComponent{counterValue = 100;@Output() counterChange = new EventEmitter();decrement() {this.counterChange.emit(-- this.counterValue );}
}

?這樣<customer-counter (counterChange) = "changeValue($event)"></customer-counter>當子組件中的counterChange事件被觸發，就會執行父組件中的changeValue()方法，進而改變父組件中的相關數據。?
4. 雙向綁定?
　　上面介紹的方式{{}}和[]是將組件中的數據綁定到DOM元素上，而()是將組件中的事件綁定到組件中的方法上，那么該如何數據的雙向綁定呢？?
　　Angular2是通過[()]來實現的，例如<input [(ngModel)]="value">就是雙向綁定input元素的值。但是需要注意的是[()]只能綁定在有輸入輸出功能的DOM元素上(例如：input、textare)，如果綁定在div這樣的元素上就會報錯。?
　　那么，如何通過[()]在我們自定義的指令上實現雙向綁定呢？沒錯，就是使用@Input和@Output來實現。

//父組件
@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屬性發生改變時也更新父組件的someValue值。?
　　需要注意的是，我們定義的事件監聽是counterChange，而使用的確實[(counter)]。這是因為Angular 2中約定添加后綴Change，也就是[(counter)]等價于[change]和(counterChange)的組合。如果去看[(ngModel)]的實現，你也會發現它是[ngModel]和[ngModelChange]的組合。

?

轉載于:https://www.cnblogs.com/zzy-run-92/p/9400114.html

總結

以上是生活随笔為你收集整理的五：Angular 数据绑定 (Data Binding)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。