Angular2 綁定 CSS
在 Angular2 的組件中，可以輕松地將 CSS 樣式綁定到模板中。這讓我們可以快速、簡單地控制組件中的樣式，而不使用繁瑣的 JavaScript。
要綁定 CSS 樣式，我們需要使用 Angular2 的內置指令 - [ngStyle] 或 [ngClass]。
[ngStyle] 指令允許我們動態地設置元素的樣式。使用它需要在組件類型中聲明一個屬性，并將它與 HTML 元素綁定。
例如，我們可以在組件中聲明一個樣式對象屬性：
pre {
color: black;
}
@Component({
selector: 'my-app',
template: `
Hello World!
`
})
export class AppComponent {
fontColor = 'red';
fontSize = '24px';
}
在上面的例子中，我們將 `fontColor` 和 `fontSize` 綁定到模板中的 div 元素中。這意味著當 `fontColor` 或 `fontSize` 的值發生變化時，該元素的樣式也會發生變化。
[ngClass] 與 [ngStyle] 相似，它允許我們基于條件動態地添加或刪除 CSS 類。下面是一個簡單的示例：
pre {
color: black;
}
@Component({
selector: 'my-app',
template: `Click me!
`
})
export class AppComponent {
isActive = false;
toggleActive() {
this.isActive = !this.isActive;
}
}
在上面的代碼中，我們使用 [ngClass] 指令在 HTML 元素中動態添加了一個名為 "active" 的 CSS 類。該類只有在 `isActive` 屬性為 `true` 時才會添加。當用戶單擊該元素時，該屬性的值會反轉，從而在 HTML 元素中添加或刪除該類。
總結
Angular2 允許我們輕松地控制組件中的樣式。因為我們可以使用內置指令 [ngStyle] 和 [ngClass] 來動態地添加或刪除 CSS 樣式，而不使用繁瑣的 JavaScript。這極大地簡化了開發過程，讓我們可以更容易地構建高質量的 web 應用程序。上一篇eval對json的用處
下一篇html 對tr設置框