在角度中，如何在 scss 文件中使用组件变量答案

【问题标题】：In angular, how can I use a component variable in scss file在角度中，如何在 scss 文件中使用组件变量
【发布时间】：2019-05-14 18:44:44
【问题描述】：

我的角度组件配置了一个高图（堆叠条形图）。我需要将颜色作为输入并将颜色设置为条形图。我正在使用 Highcharts 的“样式模式”，所以我需要使用 .highcharts.color-0 在 scss 文件中设置颜色。

chart.component.ts

@Component({
selector: 'chart',
styleUrls: ['./chart.component.scss'],})
export class NwfStatusableDropdownComponent {

@Input() public color1;
public chart;
this.chart = new Chart() { //all chart config }

chart.component.scss

.highcharts-point.highcharts-color-0{
   fill: {{color1}},
 }

【问题讨论】：

请分享您到目前为止尝试过的代码
你不能这样做。 SCSS 不是在运行时编译的，它应该如何工作？您必须使用 Renderer2 直接在组件中操作元素或设置样式对象并在模板中使用它（然后您可以操作）。

标签： css angular highcharts

【解决方案1】：

你应该选择更简单的方式来实现。

在我的例子中，我在组件中创建了一个颜色数组变量

colors =  [ '#009ada', '#dc0004', '#72be00', '#b500c9', '#002ab4'];

并用于设置highcharts系列的颜色

【讨论】：