如何动态设置Angular 2+组件的复杂CSS？

Question

我想问一点小小的问题，让我的大脑开箱即用。

语境

角4使用角CLI和AOT。

https://angular.io/docs/ts/latest/guide/component-styles.html中提到的所有方法都描述了在开发人员编写组件时设置复杂CSS的方法。

组件创建后，角允许调整个人风格，甚至在组件，请你，所有使用[ngClass]，<div [class.something]="condition">，各种@HostBinding装饰和一些其他的方法指定不同的CSS类的标签名称。

但是，以上都不能更改组件正在使用的CSS声明。上述方法可以（a）使用开发人员定义的样式表中已有的内容，或者（b）将单独的CSS属性设置为组件模板中的单个HTML标签。

问题

我将如何更新运行时整个组件的CSS，以便在该组件响应所有元素到新的CSS？

假设我为div.someClass引入了一种新风格，并且我希望所有匹配元素div.someClass能够反映新风格。

Plunker

我尝试的展示是在这里：https://plnkr.co/edit/N2C40cSb7hd1AyOxWWdT

的按钮应该是红色的基础上，MyChildComponent.styles

我想我明白为什么它不工作的价值我期望的方式：简而言之，样式是在编译期间在组件中构建的，而不是运行时，包括在模板中<style />标签内发现的样式。

但知道它为什么不起作用并不能帮助我使它工作。

任何帮助高度赞赏。

Answer 1

解决方案1 ​​

插入一个新的CSS类是不可能的（据我所知），但你可以动态插入CSS属性到您的组件。 我修改了dynamicStyles()这个

get dynamicStyles(): any{ 
    return {'background': 'red' }; 
    } 

返回的字符串，而不是一个对象，因为你将这个对象传递给你的按钮ngStyle。

在模板中，我改变这样

<button type="button" 
[ngStyle]="styles"> 
    Button 
</button> 

这里的按钮是一个plunkr

解决方案2

这事，我不会建议，但在你的情况下，它可能有用。您可以添加此

encapsulation: ViewEncapsulation.None

和进口

import {ViewEncapsulation} from '@angular/core' 

你@ Component.You可以泄露你的组件的CSS，使您可以在子组件上使用它。然后在你的子组件中，在你的按钮中添加一个[ngClass]，这样你就可以通过@Input（）传递一个变量，如果它应该是红色的。

<button type="button" 
    [ngClass]="{'redButton': isButtonRed}" 
    >Button</button> 

而在你的style.css

.redButton{ 
    background:red; 
} 

而在你的主要成分。

<div> 
    <h2>Hello name</h2> 
    <my-child [isButtonRed]="true"></my-child> 
</div> 

这里的另一个plunkr

希望这有助于。