在角度中，如何在Scss文件中使用组件变量

Question

我的角度组件配置了一个高图表（堆积的条形图）。我需要将颜色作为输入并将颜色设置为条形图。我正在使用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}},
 }

Answer 1

您应该选择易于实现的方式。

就我而言，我在组件中创建了一个colors数组变量

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

并用于设置图表的颜色