Angular 4在代码覆盖Bootstrap颜色全局

我期待创建一个动态着色系统与Angular。我创建了一个包含4个字符串，成功，信息，警告和危险的服务，并带有默认的颜色代码。我想我的应用程序的根，我认为是在app.component因为我使用的路由注入此服务，并在全球范围覆盖Angular 4在代码覆盖Bootstrap颜色全局

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

来源

2017-06-29 Bailey Miller

您可以创建一个共享服务和CSS类绑定到'[ngClass]'取决于事件时，用户改变从设置或其他颜色选项触发之间切换 – Abrar

我不明白如何将自己的颜色以全局方式应用于.btn-warning类，而无需将ngClass应用于一堆标记 –

如果您在'style.css'中定义了css类文件（它应该在根级别），那么它应该在整个应用程序中全局可用 – 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

Angular 4在代码覆盖Bootstrap颜色全局

回答

相关问题