快捷導(dǎo)航

Angular5給組件本身的標(biāo)簽添加樣式class的方法

更新時(shí)間：2018年04月07日 15:14:27 作者：ngoing

本篇文章主要介紹了Angular 5 給組件本身的標(biāo)簽添加樣式class的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

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

設(shè)置style：

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

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

設(shè)置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 {}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS?的生命周期和基礎(chǔ)語(yǔ)法使用詳解
當(dāng)你在輸入框中鍵入文本時(shí),這個(gè)文本會(huì)立即反映到?testString?屬性上,反之亦然,如果你在組件類中改變?testString?的值,輸入框的內(nèi)容也會(huì)相應(yīng)更新,這篇文章主要介紹了AngularJS?的生命周期和基礎(chǔ)語(yǔ)法,需要的朋友可以參考下
2024-05-05
淺談Angular7 項(xiàng)目開發(fā)總結(jié)
這篇文章主要介紹了淺談Angular7 項(xiàng)目開發(fā)總結(jié)，本文在此做一次遇到問題的總結(jié)，以便知識(shí)的掌握，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決
這篇文章主要介紹了angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
AngularJs ng-change事件/指令的用法小結(jié)
本篇文章主要介紹了AngularJs ng-change事件/指令的小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
AngularJS實(shí)時(shí)獲取并顯示密碼的方法
這篇文章主要介紹了AngularJS實(shí)時(shí)獲取并顯示密碼的方法,涉及AngularJS數(shù)據(jù)綁定及顯示相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
angularjs數(shù)組判斷是否含有某個(gè)元素的實(shí)例
下面小編就為大家分享一篇angularjs數(shù)組判斷是否含有某個(gè)元素的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)，詳細(xì)的介紹了這兩種表單的實(shí)現(xiàn)以及區(qū)別，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-12-12
AngularJS的表單使用詳解
這篇文章主要介紹了AngularJS的表單使用詳解,在JS原有的基礎(chǔ)上提供了更多與HTML交互的功能,需要的朋友可以參考下
2015-06-06
angular共享依賴的解決方案分享
這篇文章主要給大家介紹了關(guān)于angular共享依賴解決方案的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
Angular搜索場(chǎng)景中使用rxjs的操作符處理思路
這篇文章主要介紹了Angular搜索場(chǎng)景中使用rxjs的操作符處理思路,主要的思路就是通過(guò)Subject來(lái)發(fā)送過(guò)濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下
2018-05-05