在 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