快捷導(dǎo)航

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

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

本篇文章主要介紹了Angular 5 給組件本身的標(biāo)簽添加樣式class的方法，小編覺(jué)得挺不錯(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)文章

Angular1.x自定義指令實(shí)例詳解
這篇文章主要介紹了Angular1.x自定義指令,結(jié)合實(shí)例形式分析了Angular1.x自定義指令的實(shí)現(xiàn)與使用方法,以及相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2017-03-03
angularjs利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤(pán)的示例
下面小編就為大家?guī)?lái)一篇angularJS利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤(pán)的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
詳解AngularJS中的作用域
這篇文章主要介紹了詳解AngularJS中的作用域,是AngularJS學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-06-06
Angular懶加載模塊與Combined?Injector原理全面解析
這篇文章主要為大家介紹了Angular懶加載模塊與Combined?Injector原理全面解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
Angular.js中處理頁(yè)面閃爍的方法詳解
我們?cè)趹?yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺(jué)不到區(qū)別；但也可能很長(zhǎng)，這樣會(huì)導(dǎo)致讓我們的用戶(hù)看到了沒(méi)有被渲染過(guò)的頁(yè)面。本文將介紹Angular.js中處理頁(yè)面閃爍的方法。
2017-03-03
AngularJS輕松實(shí)現(xiàn)雙擊排序的功能
網(wǎng)上已經(jīng)有AngularJS比較多的相關(guān)教程了，那么這篇文章我們一起來(lái)看一個(gè)AngularJS雙擊排序的例子，對(duì)大家日常開(kāi)發(fā)很有幫助的，有需要的可以參考借鑒。
2016-08-08
詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐
這篇文章主要介紹了詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
angularjs實(shí)現(xiàn)下拉列表的選中事件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)下拉列表的選中事件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼
這篇文章主要介紹了Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11