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