Angular 4 In Code 全局覆盖 Bootstrap 颜色答案

【问题标题】：Angular 4 In Code override Bootstrap colors globallyAngular 4 In Code 全局覆盖 Bootstrap 颜色
【发布时间】：2017-12-03 11:26:36
【问题描述】：

我希望用 Angular 创建一个动态着色系统。我创建了一个服务，它有 4 个字符串，成功、信息、警告、危险，它们的颜色代码默认。我想在我的应用程序的根目录下，我假设它位于 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 
}

我希望这是动态的，以便用户进入设置面板时可以更改这些颜色并实时查看使用这些类的每个地方的效果。

我看到 [ngStyle] 但这会将特定的东西（例如颜色）仅应用于一个元素。我也看到了[ngClass]，但我不知道如何创建更像是将类应用于元素的一种方式。

我可以这样做吗？

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

【问题讨论】：

您可以创建共享服务并在绑定到[ngClass] 的css 类之间切换，具体取决于用户从设置或其他位置更改颜色选项时触发的事件
我不明白如何以全局方式将自己的颜色应用于 .btn-warning 类，而无需将 ngClass 应用于一堆标签
如果您在 style.css 文件中定义 css 类（应该在根级别），那么它应该在整个应用程序中全局可用
缺少动态和代码中的单词，我不想对它们进行硬编码，我有一个工作示例，我将很快发布。

标签： css angular styling

【解决方案1】：

这可能不是最优雅的解决方案，但我真的很喜欢它，因为它设置起来非常容易。在我的 app.component 我有这个设置。在 GenerateColorSettings 方法中，您需要定义所有不同的颜色，这需要我进一步扩展 ColorSettings 中的类。一些效果是默认的，: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};
    }
    `;
  }

【讨论】：