使用 ngStyle 实现动态style

在 Angular 应用中，有时需要根据组件状态动态设置某个元素的样式。此时可以使用 ngStyle 指令来实现。

基本语法

<div [ngStyle]="{'property1': value1, 'property2': value2}">
  我是文本
</div>

解释

• ngStyle：指令名称
• [ngStyle]：方括号表示值可以动态变化，是一个绑定到组件属性的表达式
• {'property1': value1, 'property2': value2}：实际要设置的 style 对象，其中 property1、property2 是 CSS 属性名称，value1、value2 是属性值

示例

<div [ngStyle]="{'color': isRed ? 'red' : 'black', 'font-size': isBig ? '30px' : '16px'}">
  我是文本
</div>

• 当 isRed 为 true 时，文本颜色为红色，否则为黑色
• 当 isBig 为 true 时，文本字体大小为 30px，否则为 16px

备注

• ngStyle 的样式对象可以从组件中取得，这样就可以实现更加复杂的样式变化
• ngStyle 的属性值只接受字符串，如果需要设置数字，需要在属性值中添加单位
• ngStyle 可以和其他样式类指令一起使用，它们的样式会按照先后顺序叠加应用