數(shù)據(jù)綁定
1肪跋、事件綁定
$event對(duì)象的target屬性指向的是input節(jié)點(diǎn)歧蒋，等號(hào)右側(cè)的不一定是函數(shù)調(diào)用，也可能是屬性賦值：如圖州既，當(dāng)button被點(diǎn)擊時(shí)谜洽，組件控制器的saved屬性會(huì)變成true。ps:綁定的事件除了DOM事件外吴叶，也可以自定義事件阐虚。
2、DOM屬性綁定
插值表達(dá)式和[img]原則上是一樣的;
<img [src]="imgUrl" alt="">
<hr>
html屬性和DOM屬性的區(qū)別蚌卤；
html屬于是不變的敌呈，DOM屬性是可以改變的
....
//模板中
<input type="text" value="tom" (input)="doOnInput($event)">
...
//組件控制器中
doOnInput(event:any){
console.log(event.target.value);
console.log(event.target.getAttribute('value'));
}
3、HTML屬性綁定
3.1 樣式綁定
3.1.1 class樣式替換
//模板中
<div [class]="divClass">Steven_Qin</div>
...
//組件控制器中
divClass:string;
constructor() {
setTimeout(()=>{
this.divClass = 'a b c';
},3000)
}
...
//CSS中
.a{
background: yellow;
}
.b{
color: red;
}
.c{
font-size: 60px;
}
3.1.2 class樣式追加
//模塊中
<div class="a b" [class.c]="isBig">Steven_Qin</div>
...
//組件控制器中
isBig:boolean = false;
constructor() {
setTimeout(()=>{
this.isBig = true;
},3000);
}
3.1.3 [ngClass] 實(shí)現(xiàn)對(duì)多個(gè)類(lèi)的分別管理
...
//模板中
<div [ngClass]="divClass">Steven_Qin</div>
...
//組件控制器中
divClass:any = {
a:false,
b:false,
c:false,
};
constructor() {
setTimeout(()=>{
this.divClass = {
a:true,
b:true,
c:true,
};
},3000);
}
3.2 style內(nèi)聯(lián)樣式綁定
//模板中
<div [style.color]="isDev?'red':'blue'">Steven_Qin</div>
//組件控制器中
isDev:boolean = false;
constructor() {
setTimeout(()=>{
this.isDev = true;
},3000);
}
3.2.1 style帶單位的
<div [style.font-size.em]="isDev?3:1">Steven_Qin</div>
3.2.2 [ngStyle]多重內(nèi)聯(lián)樣式用法
//模板中
<div [ngStyle]="divStyle">Steven_Qin</div>
//組件控制器中
divStyle:any = {
color:'red',
background:'green'
};
constructor() {
setTimeout(()=>{
this.divStyle = {
color:'green',
background:'red'
}
},3000);
}
4造寝、雙向綁定
<div>
<textarea name="innerContent" [(ngModel)]="newComment"></textarea>
</div>
