Question

我想要一点点推动，让我的脑子从盒子里拿出来。

上下文

Angular 4使用Angular CLI和AoT。

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

创建组件后，Angular允许调整各个样式，甚至可以根据需要为组件中的标记分配各种CSS类名，所有这些都使用[ngClass]，<div [class.something]="condition">，各种{{1装饰器和其他一些方法。

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

问题

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

假设我为div.someClass引入了一个新样式，我想要所有匹配元素div.someClass来反映新样式。

Plunker

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

该按钮应为红色，具体取决于@HostBinding

的值

我想我理解为什么它没有像我期望的那样工作：简而言之，样式在编译期间构建在组件中，而不是运行时，包括模板中MyChildComponent.styles标签内的那些。

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

任何帮助都非常感谢。

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。您可以泄漏组件的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

希望这有帮助。