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

【问题标题】：How to use component variable within css / style tag in Angular 2?如何在 Angular 2 的 css / style 标签中使用组件变量？
【发布时间】：2017-04-10 08:19:46
【问题描述】：

如何在 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 模板。但是这不起作用

类似问题尚未回答此问题，仅显示属性绑定作为解决方案：

【问题讨论】：

#header, #header a { 是一个 CSS 选择器，它选择 id 为 header 的元素，它是 <a> 的子元素。我不希望模板变量在样式标签中工作。你应该使用ngStyle。也不鼓励绑定到视图="changeBackground()" 中的方法，因为它会在每个更改检测周期中调用。而是将结果分配给属性并将视图绑定到属性。
Angular2 dynamic change CSS property的可能重复
我知道这个问题现在有点老了，但这个答案可能会帮助你stackoverflow.com/a/48265526/1389807

标签： css angular

【解决方案1】：

按照此答案中的说明使用 NgStyle

https://stackoverflow.com/a/41903349

总之

<header id="header" [ngStyle]="getStyle()">
  <div>
    Some Text
    <a href="asdf">Some Link</a>
    <subcomponent></subcomponent>
  </div>
  <div> ... a lot mor stuff </div>
</header>

和

getStyle(): any {
    return {"background-color" : this.changeBackgroundColor()};
}

【讨论】：

阅读问题。他们不想使用绑定。

【解决方案2】：

在我看来，您只是在创建一个名为“子组件”的新组件，为什么不这样做呢？

子组件.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'subcomponent',
  templateUrl: './subcomponent.html',
})
export class SubComponent {
  mycolor = 'blue';
}

子组件.html：

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

【讨论】：

也是我的第一个想法，但这也不起作用。 Angular 提取样式标签，将其插入到 head 中，并且不替换此部分中的 mustache 变量。 :(
查看这个 SO 问题：stackoverflow.com/questions/2830296，它可能会回答为什么 angular 正在移动样式标签以及如何解决它。
但在我的情况下它仍然不能替换 mustache 变量：/
@Manuel 您还面临哪些问题？你指的是{{mycolor}}插值吗？
我今天遇到了这个问题。不敢相信仍然没有办法解决。

【解决方案3】：

到你的@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}};
    }`
  `]
})

【讨论】：

这不起作用。它将胡子代码写入 css，导致无效的 css 属性值#header[_ngcontent-mpf-4] { background-color: {{currentPartner.partnerColorPrimaryBackground}} !important; }