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'
		}