在 Angular 2 模板中绑定内联样式很容易。以下是一个绑定单个样式值的示例：
你还可以指定单位，例如在这里我们将单位设置为 em，但也可以使用 px、% 或 rem：
<p [style.font-size.em]="'3'">A paragraph at 3em!
</p>
以下是根据组件属性有条件地设置样式值的方法：
<p [style.font-size.px]="isImportant ? '30' : '16'">Some text that may be important.
</p>
NgStyle 用于多个值
简单的样式绑定适用于单个值，但要应用多个样式，最简单的方法是使用 NgStyle：
<p [ngStyle]="myStyles">You say tomato, I say tomato
</p>
然后 myStyles 将是组件中包含以 CSS 属性名称为键的对象的属性，如下所示：
myStyles = {
'background-color': 'lime',
'font-size': '20px',
'font-weight': 'bold'
}
或者可以像这样内联提供对象：
<p [ngStyle]="{'background-color': 'lime','font-size': '20px','font-weight': 'bold'}">You say tomato, I say tomato
</p>
或者对象可以是方法的返回值：
<p [ngStyle]="setMyStyles()">You say tomato, I say tomato
</p>
在相关的组件类中
setMyStyles() {let styles = {'background-color': this.user.isExpired ? 'red' : 'transparent','font-weight': this.isImportant ? 'bold' : 'normal'};return styles;
}
另请参阅
- Class binding + NgClass
