当元素没有dom属性的时候我们所以要用html属性绑定。
Html属性绑定分三种情况:基本Html属性绑定、CSS类绑定、样式绑定
1. 基本Html属性绑定。语法如下
<td [attr.colspan]= "tableColspan">Something</td>
1) [att.colspan] 代表属性绑定,colspan是属性的名字;
2) "tableColspan" 是一个表达式,他绑定在colspan这个属性的名字上;
2. CSS类绑定。就是为了控制class的,分三种方式。
1)第一种方式。表达式someExpression的值用来控制myClassName1 myClassName2的值。
注意这里是可以写多个class名的。
<div class="myClassName1 myClassName2" [class]="someExpression">something</div>
上面代码是完全控制class的样式名字,假如我只想控制器中一个,其他的class类名不需要改变,我们可以换成另一种写法
<div class="myClassName1" [class.myClassName2]="someExpression">something</div>
这里就是用了class. 的方法。
2)第二种方式。isSpecial表达式是个boolean值,当值是true的时候这个div就有这个class, 如果是false的时候就没有这个class.
<div [class.special]="isSpecial">something</div>
3)第三种方式 [ngClass]指令方式。同时控制多个class。myClassName1和myClassName2是class的名字,他的isA和isB的boolean值分别控制各自的类是否存在。[ngClass]是一个指令。"{myClassName1: isA, myClassName2: isB}" 是个对象
<div [ngClass]="{myClassName1: isA, myClassName2: isB}">something</div>
3. 样式绑定。分2种方式
1)第一种方式是控制样式属性。下面代码是 表达式的值控制了样式颜色是red 还是green。
<button [style.color]="siSpecial ? `red`: `green`">Red</button>
2)第二种方式 [ngStyle]指令方式。
<div [ngStyle]="{`font-style`: this.myStyle ? `italic`: `normal`}">
[ngStyle] 是指令
font-style是样式名称
this.myStyle的值控制他的样式是 italic 还是 normal