在 Angular
中样式绑定通常会采用一下几种方式进行。在 Angular
对大小写特别敏感,注意大小写。
1、class.className
的形式
通过类名绑定样式属性,然后通过条件表达式是否展示需要的样式。
<div [class.className]="true">元素的样`在这里插入代码片`式</div>
.className {
font-size: 32pt;
color: red;
}
2、ngClass
的形式
使用 ngclass
绑定样式,属性值为一个对象,表示绑定多个 class
。
<div [ngClass]="{'one':true,'two':true}">元素的样式</div>
.one {
font-size: 32pt;
color: red;
}
.two{
background-color: cadetblue;
}
3、ngStyle
的形式
使用 ngStyle
可以直接绑定样式属性,值为一个对象,表示绑定多个 css
样式。
<div [ngStyle]="{'color':'red','font-size':'32pt'}">元素的样式</div>