相关疑难解决方法(0)

如何在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

我有一个组件，它根据 json 文件中存储的值设置 div 的背景颜色，然后循环显示一堆颜色样本。

   <div class="color-swatch-color"
        [style.background-color]="foo"></div>

它与变量中的十六进制颜色配合得很好：foo="#f00";

但没有颜色显示我使用的颜色变量：foo = 'var(--primary)';

div 显示在 HTML 中，不会引发任何错误，但 div 上根本没有背景颜色。

更新

我应该更清楚。我有一个使用诸如 --primary、-- secondary （如 Bootstrap）之类的变量的主题。我想展示这些颜色的样本。但是，我在 CSS 类中使用变量，以便可以通过 body 标记上的“主题”类更改它们的值。

因此，我尝试将样本设置为变量，以便当用户更改 body 标记上的类时，样本会像我的应用程序的其余部分一样自动更改颜色。

看看这个 stackblitz。如果我直接分配变量，它会分配背景颜色。通过角度变量，它不分配任何颜色。

我这样做是因为如果你打开开发工具，你可以选择我的品牌颜色变量并即时更改它；这类似于切换主题，其中“brandcolor”可以改变访问主题

我有一个在 scss 中实现进度条的 mixin。

@mixin progressBarMix($name, $size, $perc, $color, $colorBack) {
  .progressBarWrapper {
    &#{$name} {
      $sizeFill: $size / 100 * $perc;

      .progressBarEndFilled {
        background-color: rgba($color, 1);
        left: $sizeFill;
      }

      .progressBarEnd {
        background-color: $colorBack;
      }
    }
  }
}

@include progressBarMix('.progressBar', 232px, 66, $bar, $barBackground);

我需要能够动态地包含此内容，其中代码中的“66”代表进度，并且应该绑定到我的控制器中的变量。这可能吗？

谢谢