角4のコードでは、グローバルにブートストラップの色をオーバーライドします

私はAngularでダイナミックなカラーリングシステムを作成したいと考えています。私は4つの文字列、成功、情報、警告、危険性のあるデフォルトの色コードを持つサービスを作成しました。私は、このサービスを注入し、私はこれがダイナミックになりたいグローバル角4のコードでは、グローバルにブートストラップの色をオーバーライドします

.btn-warning { 
    color: #fff; <-- Inject my own color like so (color: AppSettings.ColorSettings.Warning) 
    background-color: #f0ad4e; <-- Inject my own color 
    border-color: #f0ad4e; <-- Inject my own color 
}

を上書きするために、ルーティングを使用していますので、app.componentであると仮定し、私のアプリケーションのルートにしたいので、ユーザはに入った場合に設定パネルでこれらの色を変更し、リアルタイムでそのクラスを使用するすべての場所で効果を確認できます。

私は[ngStyle]を参照していますが、これは色のような特定の要素を1つの要素に適用します。私は[ngClass]も見ていますが、要素をクラスに適用する方法のように、クラスを作成する方法はわかりません。

そういうことができますか？

<html> 
<!-- Junk^with bootstrap up here --> 
<style>{{GetColorSettings()}}</style> 
<!-- More stuff --> 
</html>

出典

2017-06-29 Bailey Miller

あなたは共有サービスを作成し、ユーザーが設定や他の色のオプションを変更したときに '[ngClass]'イベントに応じて、トリガーに結合するCSSクラスを切り替えることができます場所 – Abrar

私はあなた自身の色を、たとえば、CSSCクラスを 'style.css'で定義すると、たくさんのタグにngClassを適用することなく、グローバルな方法で.btn警告クラスに適用する方法を理解していません。 –

ファイル（ルートレベルにある必要があります）は、アプリケーション全体でグローバルに使用できるようにする必要があります。 – Abrar

これは最も洗練された解決策ではないかもしれませんが、セットアップが簡単にできることは本当に好きです。私のapp.componentの中に私はこの設定をしています。 GenerateColorSettingsメソッド内では、異なる色をすべて定義する必要があります。これにより、ColorSettings内でクラスをさらに拡張する必要があります。効果のいくつかは、デフォルトです：ホバー、：無効

は

constructor(public infoService: InformationService, private configSettings: GlobalConfigSettings) 
    { 
    var style = document.createElement('style'); 
    style.innerHTML = this.GenerateColorSettings(); 
    style.id = "DynamicColors" 
    document.body.appendChild(style); 


    setTimeout(() =>{ 
     configSettings.ColorSettings.warning = "#fff"; 
     configSettings.ColorSettings.ColorsChanged.emit(); 
    }, 25000); 

    configSettings.ColorSettings.ColorsChanged.subscribe(() => 
    { 
     var style = document.getElementById('DynamicColors'); 
     style.innerHTML = this.GenerateColorSettings(); 
    });  

    } 



    private GenerateColorSettings(): string 
    { 
    console.log("Getting color"); 
    return `.btn-warning{ 
     color: #fff; 
     background-color: ${this.configSettings.ColorSettings.warning}; 
     border-color: ${this.configSettings.ColorSettings.warning}; 
    } 

    .btn-warning:hover{ 
     color: #fff; 
     background-color: ${this.configSettings.ColorSettings.warning}; 
     border-color: ${this.configSettings.ColorSettings.warning}; 
    } 
    `; 
    }

出典

2017-06-29 16:55:56

角4のコードでは、グローバルにブートストラップの色をオーバーライドします

答えて

関連する問題