Javascript 在角度模板HTML中使用css变量？
我有一个组件，它根据存储在json文件中的值设置div的背景色，然后循环显示一组色样Javascript 在角度模板HTML中使用css变量？,javascript,html,css,angular,css-variables,Javascript,Html,Css,Angular,Css Variables,我有一个组件，它根据存储在json文件中的值设置div的背景色，然后循环显示一组色样 <div class="color-swatch-color" [style.background-color]="foo"></div> 它可以在变量中使用十六进制颜色：foo=“#f00” 但是没有颜色显示我使用的颜色变量：foo='var（--primary'） div显示在HTML中，没有抛出错误，但是div上根本没有背景色 更新 我应该更清楚。我有一
<div class="color-swatch-color"
[style.background-color]="foo"></div>
foo=“#f00”
但是没有颜色显示我使用的颜色变量：foo='var（--primary'）
div显示在HTML中，没有抛出错误，但是div上根本没有背景色
更新
我应该更清楚。我有一个使用变量的主题，比如--primary，-secondary（比如Bootstrap）。我想展示那些颜色的样本。但是，我使用CSS类中的变量，这样我就可以在body标记上使用“theme”类来更改它们的值
因此，我尝试将样例设置为变量，以便当用户更改body标记上的类时，样例会像我的应用程序的其他部分一样自动更改颜色
。如果我直接指定var，它会指定背景色。通过角度变量，它不指定任何颜色
我这样做是因为如果你打开开发工具，你可以选择我的brandcolor变量，并在运行中更改它；这类似于切换主题，“brandcolor”可以根据主题的不同而变化编辑：这个怎么样
{{bg}
您需要内联CSS来使用CSS变量和角度插值，我认为这将起作用：
下面是使用角度插值动态内联声明CSS变量的示例
<!--HTML-->
<html style="--color: {{myAngularVar}}"> <!-- declare a variable inline use Angular interpolation the value of myAngularVar is imply string/text the browser will parse as CSS code -->
使用一个基于角度字符串/文本插值的变量，我使用了foo，因为这是问题中角度变量的名称
<!--CSS-->
<style>
div.color-swatch-color {
background-color: var({{foo}}) //another example
}
</style>
div.color-swatch-color{
背景色：var（{{foo}}）//另一个例子
}
OP的stackblitz示例与var
被angular编译器认为是危险的事实无关
这可以通过DomSanitizer绕过
public bg = this.sanitizer.bypassSecurityTrustStyle('var(--brandcolor)');
constructor(private sanitizer: DomSanitizer) {}
请参见当通过[style.-feat image]=…'或[ngStyle]=“{'--feat image'：…}”绑定自定义CSS变量时，angular会忽略该属性，而不会绑定该属性。这是为了避免安全问题
如果您信任这些样式，则可以执行以下操作：
1.创建一个管道以绕过样式（告诉他们值得信赖）
@Pipe（{name:'safe'}）
出口级安全管{
构造器（消毒剂：DOMSANTIZER）{
这个。消毒剂=消毒剂；
}
变换（样式）{
返回此.sanitizer.bypassSecurityTrustStyle（样式）；
}
}
2.在html中，使用如下管道
这在Angular 8中对我很有效。foo='var（--primary）
的计算结果是什么？它是一个CSS变量。如果只是像{{foo}}
那样转储到模板中的任何位置，那么它就是var（--primary）
。我要寻找的是
var（--primary）“#00f”console.log（var（--primary））在您的组件中打印出什么？“可能会有帮助。”布里亚诺登请解释原因。谢谢。根据您的回答，OP无法通过包含不同颜色的JSON文件动态更改颜色colors@Steve也许现在试试？我编辑了答案，它在StackBlitz上运行，在我的例子中，这让我得到了答案：我返回'background-color'：var（${this.variable}
（在我的应用程序中，json键“variable”类似于“-primary、-brand”等。我真的不想覆盖组件中变量的值；事实上，我希望它保持“链接”应用程序本身中变量的当前值。这样，“主题切换”组件可以更改站点范围内的颜色，我的样例也会更改。
public bg = this.sanitizer.bypassSecurityTrustStyle('var(--brandcolor)');
constructor(private sanitizer: DomSanitizer) {}