在 Angular 2 模板中绑定内联样式很容易。 例如，以下是绑定单个样式值的方法：
<p [style.background-color]="'darkorchid'"> Quite something! </p>
也可以指定单位，例如我们将单位设置为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;
}
