Angular2數(shù)據(jù)綁定詳解
大致介紹
Angular2中數(shù)據(jù)綁定的方式默認(rèn)是以單向方式，數(shù)據(jù)綁定的方式可以分為：
1、屬性綁定和插值表達(dá)式 組件類-> 模板
2、事件綁定：模板 -> 組件類
3、雙向綁定： 模板 <-> 組件類
事件綁定
事件綁定是把模板中的事件綁定到組件類中的方法上，例如在一個組件中的HTML代碼是：
<p> <a (click)="doClick($event)">點(diǎn)我</a> </p>
(click)表示要進(jìn)行的操作，當(dāng)用戶點(diǎn)擊時就會執(zhí)行組件類中的doClick方法
export class BindComponent implements OnInit {
constructor() { }
ngOnInit() {
}
doClick(event: any){
console.log(event.target.innertext);
}
}
屬性綁定和插值表達(dá)式
其實屬性綁定和插值表達(dá)式是同一個東西，因為在解析代碼時，插值表達(dá)式會轉(zhuǎn)換為屬性綁定，所以你想用哪個就用哪個
下面的代碼作用都是一樣的
<!-- 插值表達(dá)式 -->
<img src="{{imgUrl}}" />
<!-- 屬性綁定 -->
<img [src]="imgUrl" />
屬性綁定又分為HTML屬性綁定和DOM屬性綁定，他們之間的區(qū)別是什么？先來看一個例子
<input type="text" value="hello" (input)="doInput($event)" />
doInput(event: any){
console.log(event.target.value);
console.log(event.target.getAttribute('value'));
}
瀏覽器的顯示：
可以看到event.target.value是獲取的DOM屬性，是可變的。表示當(dāng)前元素的狀態(tài)
而event.target.getAttribute("value")獲取的是HTML屬性，是不可變的。只負(fù)責(zé)初始化HTML元素，不可改變
注意：
1、有些DOM屬性沒有映射的HTML屬性，同樣有些HTML屬性也沒有映射的DOM屬性
2、模板綁定的是DOM屬性
HTML屬性綁定
1、基本HTML屬性綁定
<td [attr.colspan]="表達(dá)式"></td>
2、css綁定
<div class="a" [class]="b"></div> //b會完全替代a
<div [class.a]="fn()"></div> //fn()返回true，false，如果true添加.a
<div [ngClass]="{a:isA,b:isB}"></div> //b會完全替代a
3、樣式綁定
<button [style.color]="a?red:green">button</button>
<button [ngStyle]="{'font-style':a?'red':'green'}">button</button>
雙向綁定
雙向綁定可以從組件類 -> 模板，也可以從模板 -> 組件類
例子：
<input type="text" [(ngModel)]="name" (input)="doInput()" />
private name: string = 'asdf';
doInput(){
setInterval(() => {
this.name = 'sdf';
},3000);
}
利用[(ngModel)]可以實現(xiàn)雙向數(shù)據(jù)綁定，首先在輸入框中修改name，從而改變組件類中name的值，是模板組 -> 件類，修改值之后三秒，又重新設(shè)置name的值，是組件類 -> 模板
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Angular封裝WangEditor富文本組件,得益于Angular的強(qiáng)大，封裝WangEditor組件非常簡單，需要的朋友可以參考下2021-07-07
Angular.JS讀取數(shù)據(jù)庫數(shù)據(jù)調(diào)用完整實例
這篇文章主要介紹了Angular.JS讀取數(shù)據(jù)庫數(shù)據(jù)調(diào)用,結(jié)合完整實例形式分析了AngularJS使用$http.get方法與后臺php交互讀取數(shù)據(jù)庫數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
本篇文章主要介紹了Angular開發(fā)者指南的入門知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了AngularJS 實現(xiàn)購物車全選反選功能,需要的朋友可以參考下2017-10-10
Angular ng-animate和ng-cookies用法詳解
本文講一下Angular中動畫應(yīng)用的部分。這篇文章主要介紹了Angular ng-animate和ng-cookies用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
AngularJs學(xué)習(xí)第八篇 過濾器filter創(chuàng)建
這篇文章主要介紹了AngularJs學(xué)習(xí)第八篇 過濾器filter創(chuàng)建的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了Angular2 NgModule 模塊詳解的相關(guān)資料,并附簡單實例，需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關(guān)于如何測試angular組件間傳值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angular組件具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
詳解angularJs中關(guān)于ng-class的三種使用方式說明
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要講解AngularJs directive的知識，這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09