欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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配置里添加屬性，等同于標簽上綁定屬性的用法一樣。

設(shè)置style：

  1. '[style.color]': "'red'"：注意red值雙引號里還有一個單引號。
  2. '[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 {}

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

相關(guān)文章

  • Angular1.x自定義指令實例詳解

    Angular1.x自定義指令實例詳解

    這篇文章主要介紹了Angular1.x自定義指令,結(jié)合實例形式分析了Angular1.x自定義指令的實現(xiàn)與使用方法,以及相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2017-03-03
  • angularjs利用directive實現(xiàn)移動端自定義軟鍵盤的示例

    angularjs利用directive實現(xiàn)移動端自定義軟鍵盤的示例

    下面小編就為大家?guī)硪黄猘ngularJS利用directive實現(xiàn)移動端自定義軟鍵盤的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 詳解AngularJS中的作用域

    詳解AngularJS中的作用域

    這篇文章主要介紹了詳解AngularJS中的作用域,是AngularJS學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-06-06
  • Angular懶加載模塊與Combined?Injector原理全面解析

    Angular懶加載模塊與Combined?Injector原理全面解析

    這篇文章主要為大家介紹了Angular懶加載模塊與Combined?Injector原理全面解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • Angular.js中處理頁面閃爍的方法詳解

    Angular.js中處理頁面閃爍的方法詳解

    我們在應(yīng)用的頁面或者組件需要加載數(shù)據(jù)時，瀏覽器和angular渲染頁面都需要消耗一定的時間。這里的間隔可能很小，甚至讓人感覺不到區(qū)別；但也可能很長，這樣會導(dǎo)致讓我們的用戶看到了沒有被渲染過的頁面。本文將介紹Angular.js中處理頁面閃爍的方法。
    2017-03-03
  • AngularJS輕松實現(xiàn)雙擊排序的功能

    AngularJS輕松實現(xiàn)雙擊排序的功能

    網(wǎng)上已經(jīng)有AngularJS比較多的相關(guān)教程了，那么這篇文章我們一起來看一個AngularJS雙擊排序的例子，對大家日常開發(fā)很有幫助的，有需要的可以參考借鑒。
    2016-08-08
  • 詳解Angular Karma測試的持續(xù)集成實踐

    詳解Angular Karma測試的持續(xù)集成實踐

    這篇文章主要介紹了詳解Angular Karma測試的持續(xù)集成實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • angularjs實現(xiàn)下拉列表的選中事件示例

    angularjs實現(xiàn)下拉列表的選中事件示例

    本篇文章主要介紹了angularjs實現(xiàn)下拉列表的選中事件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • 詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect

    詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect

    這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-12-12
  • Angular8引入百度Echarts進行圖表分析的實現(xiàn)代碼

    Angular8引入百度Echarts進行圖表分析的實現(xiàn)代碼

    這篇文章主要介紹了Angular8引入百度Echarts進行圖表分析的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11

最新評論