在Angular 5給組件本身的標簽添加樣式有兩種方法：

方式一：使用@Component的host屬性

@Component({ selector : 'myComponent', host : {  '[style.color]' : "'red'",   '[style.background-color]' : 'backgroundColor' }})class MyComponent { backgroundColor: string; constructor() {  this.backgroundColor = 'blue'; }}

在host配置里添加屬性，等同于標簽上綁定屬性的用法一樣。

設置style：

'[style.color]': "'red'"：注意red值雙引號里還有一個單引號。 '[style.background-color]':'backgroundColor'：這里是引用了組件里的變量backgroudColor。

這種方式的好處是可以在樣式上使用組件的變量。

設置class：

@Component({ selector : 'myComponent', host : {  '[class.myclass]' : 'showMyClass' }})class MyComponent { showMyClass = false; constructor() { } toggleMyClass() {  this.showMyClass = !this.showMyClass; }}

方式二：在樣式里使用:host選擇器

@Component({ selector : 'myComponent', styles : [`  :host {   color: red;   background-color: blue;  } `]})class MyComponent {}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。