創建具有角

Question

在我的CSS文件，整個文件的CSS類，我有一個類：

.test{ 
    background: red; 
} 

但在我的應用程序的開始，我想基於服務器的響應這樣的重新定義這個類背景根據變量變爲藍色或綠色。

對於這個類（.test）來說，新顏色的屬性非常重要，因爲我的許多元素已經有了這個類，我不想向它們應用新的類。

不確定這是非常清楚，但總結，我想創建一個從JavaScript（使用角2），將適用於整個文檔的類。

Answer 1

的代碼會發現任何樣式規則（包括媒體規則中的那些內容），它們是文檔的一部分，並覆蓋由選擇器匹配的所有樣式。

您可以在服務實例上調用modifyStyles('.test', { 'background': 'blue' })以使.test類的所有樣式具有藍色背景。您可能想要使用選擇器的功能，因爲在當前的實施中，任何有.test的規則都會改變其背景。您可能更願意將正則表達式更改爲^ .test $，以便它匹配.test和僅.test。

@Injectable() 
export class CssUpdateService { 
    constructor(@Inject(DOCUMENT) private document: Document) { 
    } 
    modifyStyles(selector: string, styles: any) { 
     const rulesToUpdate = this.findRules(new RegExp(`\b${selector}\b`, 'g')); 
     for (let rule of rulesToUpdate) { 
      for (let key in styles) { 
       rule.style[key] = styles[key]; 
      } 
     } 
    } 
    /** 
    * Finds all style rules that match the regular expression 
    */ 
    private findRules(re: RegExp) { 
     let foundRules: CSSStyleRule[] = []; 

     let ruleListToCheck = Array.prototype.slice.call(this.document.styleSheets); 
     for (let sheet of ruleListToCheck) { 
      for (let rule of (<any[]>(sheet.cssRules || sheet.rules || []))) { 
       if (rule instanceof CSSStyleRule) { 
        if (re.test(rule.selectorText)) { 
         foundRules.push(rule); 
        } 
       } 
       else if (rule instanceof CSSMediaRule) { 
        ruleListToCheck.push(rule); 
       } 
      } 
     } 
     return foundRules; 
    } 
} 

Answer 2

EDIT（公元前我最初對你的要求混淆） -

我不認爲有修改應用程序加載後的全局樣式文件的好方法，但如果我錯了，有人請糾正我。

陰影DOM使這個棘手。我會爲您的模塊提供一個運行時配置變量，然後有條件地向您的應用程序的根組件添加一個類。

<div class="outer-app-wrapper" [ngClass]="someValue"> 

然後在你的全局styles.css文件中，你可以定義.test可能存在的所有不同變體。

.someValue1 .test { 
    background: red; 
} 

.someValue2 .test { 
    background: green; 
} 

.someValue3 .test { 
    background: yellow; 
} 

我認爲，如果你定義在styles.css的文件中的所有的變化，你應該能夠避免使用「主機上下文：」選擇在後續組件。除了'body'元素之外，不需要向Angular範圍以外的元素添加任何類，只需將它添加到應用的最頂層元素，並且只要後代組件不重新定義測試類，因爲它是在全局樣式表中定義，它應該工作正常。

注 - 您也可以使用@HostBinding的類添加到您的根組件，如果你不希望添加包裝元素或以下修改現有