创建具有角

Question

在我的CSS文件，整个文件的CSS类，我有一个类：

.test{ 
    background: red; 
} 

但在我的应用程序的开始，我想基于服务器的响应这样的重新定义这个类背景根据变量变为蓝色或绿色。

对于这个类（.test）来说，新颜色的属性非常重要，因为我的许多元素已经有了这个类，我不想向它们应用新的类。

不确定这是非常清楚，但总结，我想创建一个从JavaScript（使用角2），将适用于整个文档的类。

Answer 1

的代码会发现任何样式规则（包括媒体规则中的那些内容），它们是文档的一部分，并覆盖由选择器匹配的所有样式。

您可以在服务实例上调用modifyStyles('.test', { 'background': 'blue' })以使.test类的所有样式具有蓝色背景。您可能想要使用选择器的功能，因为在当前的实施中，任何有.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（公元前我最初对你的要求混淆） -

我不认为有修改应用程序加载后的全局样式文件的好方法，但如果我错了，有人请纠正我。

阴影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范围以外的元素添加任何类，只需将它添加到应用的最顶层元素，并且只要后代组件不重新定义测试类，因为它是在全局样式表中定义，它应该工作正常。

注 - 您也可以使用@HostBinding的类添加到您的根组件，如果你不希望添加包装元素或以下修改现有