a) 普通写法

通过样式绑定，可 以设置内联样式。
样式绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而由style前缀，一个点 (.)和 CSS 样式的属性名组成。 形如：[style.style-property]。

  1. <button [style.color]="isSpecial ? 'red': 'green'">Red</button>
  2. <!-- 也可以 backgroundColor -->
  3. <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。

  1. <button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
  2. <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

提示：样式属性命名方法可以用中线命名法，像上面的一样 也可以用驼峰式命名法，如fontSize。

b) 使用NgStyle指令

虽然这是设置单一样式的好办法，但我们通常更喜欢使用 NgStyle指令 来同时设置多个内联样式。

  1. currentStyles = {
  2.     'font-style': 'italic',
  3.     'font-weight': 'bold',
  4.     'font-size': '24px'
  5. };
  6. <div [ngStyle]="currentStyles">
  7.   This div is initially italic, normal weight, and extra large (24px).
  8. </div>

ngStyle 这种方式相当于在代码里面写 CSS 样式，比较丑陋，而且将来不太好修改，非常不建议这样写（足够简单的情况除外）。