は、私はクラスを持って、私のCSSファイルでは、角度

Question

で文書全体のCSSクラスを作成します。変数に応じて背景が青色または緑色になることを示します。

このクラス（.test）に新しい色を追加することは、すでにこのクラスを持っているので、新しいクラスを適用することは望ましくありません。

わかりませんが、要約すると、ドキュメント全体に適用されるjavascript（角度2を使用）からクラスを作成したいと思います。

Answer 1

を変更したくない場合は、あなたのルートコンポーネントにクラスを追加する@HostBindingを使用することができますが（を含む任意のスタイル規則がありますドキュメントの一部であるメディアルール内のもの）を取得し、セレクタに一致するスタイルを上書きします。

あなたは青の背景を持っている.testクラスですべてのスタイルを作るためにサービスのインスタンスにmodifyStyles('.test', { 'background': 'blue' })を呼び出すことができます。現在の実装では、どこにでも.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（Iが最初にあなたの要件に混乱していたBC） -

私はグローバルスタイルは、アプリケーションをロードした後にファイルを変更するための良い方法があると思うが、私は誰かに間違っている場合は修正してくださいしないでください私。

シャドウ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のスコープの外側にある要素には、アプリケーションの一番上の要素にクラスを追加する必要はなく、子孫のコンポーネントがそのままテストクラスを再定義しない限りグローバルスタイルシートで定義されていれば、うまくいくはずです。

注 - あなたはまた、あなたがラッパー要素を追加したり、以下のコード既存の