Angular 样式绑定

  在 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>