angular5之DOM绑定和html绑定
1)DOM绑定
(一般是事件绑定)
html
<input value='tom' (input)="doInput($event)"></input>
component
doInput(event:any){
console.log(event.target.value)
}
2)html绑定
(一般是class,style,attr属性绑定)
(-----------------------------属性绑定-----------------------------------------)
html中------
<div>
<table>
<tr>
<td [attr.collapse]="size">html属性绑定</td> //给td绑定collapse属性
<td>html属性绑定</td>
</tr>
</table>
</div>
component中-----
size=3;
(---------------------class绑定-----------------------------------------)
html中-------
<p [class]="divClass"> class全部属性绑定 </p>
<p class='bg fontSize' [class.colorStyle]='isTrue'>class属性部分绑定</p>
<p [ngClass]='ngClassStyle'>使用[ngClass]绑定属性</p>
css中------
.bg{ background:blue;}
.fontSize:{ font-size:20px;}
.colorStyle{ color:red}
component中------
ngClassStyle:any={
bg:false,
colorStyle:false,
fontSize:false
}
isTrue:boolean=false;
constuctor(){
setTimeout(()=>{
this.divClass = ''bg fontSize colorStyle"
this.isTrue=true;
this.ngClassStyle={
bg:true,
fontSize:true,
colorStyle:true
}
},3000)
}
(style绑定)
<p [style.color]="isDev?'red':'green'">1111</p>
<p [style.font-size.em]="isDev?'2':'3'">222</p>
<p [ngStyle]='isStyle'>3333</p>
component中------
isStyle:any={
fontSize:'19px',
color:'red',
background:'yellow'
}