Angular5對組件標簽添加樣式class步驟說明

來源：懂視網責編：小采時間：2020-11-27 19:51:01

Angular5對組件標簽添加樣式class步驟說明

Angular5對組件標簽添加樣式class步驟說明:這次給大家帶來Angular5對組件標簽添加樣式class步驟說明，Angular5對組件標簽添加樣式class的注意事項有哪些，下面就是實戰案例，一起來看一下。在Angular 5給組件本身的標簽添加樣式有兩種方法：方式一：使用@Component的host屬性@Compone

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular5對組件標簽添加樣式class步驟說明:這次給大家帶來Angular5對組件標簽添加樣式class步驟說明，Angular5對組件標簽添加樣式class的注意事項有哪些，下面就是實戰案例，一起來看一下。在Angular 5給組件本身的標簽添加樣式有兩種方法：方式一：使用@Component的host屬性@Compone

這次給大家帶來Angular5對組件標簽添加樣式class步驟說明，Angular5對組件標簽添加樣式class的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

Angular5對組件標簽添加樣式class步驟說明

推薦度：

點擊下載本文 文檔為doc格式

標簽：組件 cla angular5

熱門焦點

Angular5對組件標簽添加樣式class步驟說明

Angular5對組件標簽添加樣式class步驟說明

Angular5對組件標簽添加樣式class步驟說明

最新推薦

猜你喜歡

熱門推薦