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

Posted 2023-03-06

技术标签:

【中文标题】如何在 Angular 2 的 css / style 标签中使用组件变量？【英文标题】：How to use component variable within css / style tag in Angular 2? 【发布时间】：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 模板。但是这不起作用

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

Angular2 dynamic change CSS property Dynamically updating css in Angular 2 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

【问题讨论】：

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

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

https://***.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 问题：***.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;