Angular 4 In Code覆盖全局Bootstrap颜色

Question

I am looking to create a dynamic coloring system with Angular. 我正在寻找使用Angular创建动态着色系统的方法。 I created a service that has 4 strings,success, info, warning, danger with defaults of their color codes. 我创建了一个服务，该服务具有4个字符串，成功，信息，警告，危险以及默认的颜色代码。 I want to at the root of my application which I assume is at app.component because I am using routing to inject this service and override globally 我想在我的应用程序的根目录（假定位于app.component上），因为我正在使用路由来注入此服务并全局覆盖

.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 
}

I want this to be dynamic so that if the user went into a settings panel could change these colors and in real time see the effect in every place that uses those classes. 我希望它是动态的，以便用户进入设置面板时可以更改这些颜色，并实时在使用这些类的每个位置看到效果。

I see [ngStyle] but that applies specific things like colors to just one element. 我看到了[ngStyle]但是它将诸如颜色之类的特定内容仅应用于一个元素。 I also see [ngClass] but I don't know how to create class that is more like a way to apply a class to an element. 我也看到了[ngClass]但我不知道如何创建类，这更像是将类应用于元素的方法。

Could I do something like so? 我可以这样做吗？

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

Answer 1

This may not be the most elegant solution however I really like it for how easy it will be to setup. 这可能不是最优雅的解决方案，但是我真的很喜欢它，因为它安装起来很容易。 Inside of my app.component I have this setup. 在我的app.component内部，我有这个设置。 Within the GenerateColorSettings method you will need to define all the different colors, which will require me expanding my classes inside of ColorSettings further. 在GenerateColorSettings方法中，您将需要定义所有不同的颜色，这将需要我进一步在ColorSettings内部扩展类。 Some of the effects are default, :hover, :disabled 有些效果是默认的：hover和：disabled

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};
    }
    `;
  }

Angular 4 In Code覆盖全局Bootstrap颜色

问题描述

1 个解决方案

解决方案1
0 2017-06-29 16:55:56

Angular 4 In Code覆盖全局Bootstrap颜色

问题描述

1 个解决方案

解决方案1 0 2017-06-29 16:55:56

解决方案1
0 2017-06-29 16:55:56