Angular2中的样式绑定和NgStyle

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

也可以看看

• 类绑定 + NgClass