如何在Angular 2中的css/style标签中使用组件变量？

Question

如何在Angular 2中的样式TAG中使用组件变量？

我的标题有一个Angular 2组件,我喜欢根据用户设置进行着色.因此,我想分配背景和字体颜色.虽然我知道如何使用绑定到元素的属性,但我无法弄清楚如何在样式标记中使用.

使用样式的属性绑定效果很好,但是这对于几个子元素来说非常烦人,特别是如果它们嵌套在其他子组件中.[ngStyle] =属性也只适用于单个元素.

<header id="header" [style.background-color]="changeBackground()">
  <div>
    Some Text
    <a href="asdf">Some Link</a>
    <subcomponent></subcomponent>
  </div>
  <div> ... a lot mor stuff </div>
</header>

因此,我想添加类似的东西

<style>
#header, #header a {
  color: {{mycolor}};
}
</style>

到HTML模板.但这不起作用

类似的问题尚未回答这个问题,只显示属性绑定作为解决方案:

• Angular2动态更改CSS属性
• 动态更新Angular 2中的css
• https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
• https://coryrylan.com/blog/introduction-to-angular-2-ngclass-and-ngstyle

Answer 1

向您的 @Component 对象添加

styles:[ `#header, #header a {
  color: {{mycolor}};
}`]

例如：

@Component({
  template: `<header id="header" [style.background-color]="changeBackground()">
    <div>
      Some Text
      <a href="asdf">Some Link</a>
      <subcomponent></subcomponent>
    </div>
   <div> ... a lot mor stuff </div>
  </header>`,
  styles: [ `#header, #header a {
    color: {{mycolor}};
    }`
  `]
})