Css 在component.ts中使用可变颜色

我有一个要传递给子组件的颜色数组

colors = ['#1e88e5', '#e53935', '#757575'];

我可以像上面那样使用硬编码十六进制值，但是有没有一种方法可以像下面那样使用全局变量呢

colors = [$primary, $secondary, $normal];

因为我想在组件上使用全局变量，而不是在

scs

上，所以我不确定如何使用它

感谢您的帮助

---

谢谢

您可以创建类并传递给子组件

这是一个例子

color.ts

export class Color {

  $primary = '#ff0000';
  $secondary = '#ffff00';
}

import { Color} from './color';

@Component({
  selector: 'my-app',
  template: `<hello [color]="color"></hello>`
})
export class AppComponent  {
   color = new Color();
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1 [ngStyle]="{color: color.$primary}">Hello</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() color: any;

在

app.component.ts

export class Color {

  $primary = '#ff0000';
  $secondary = '#ffff00';
}

import { Color} from './color';

@Component({
  selector: 'my-app',
  template: `<hello [color]="color"></hello>`
})
export class AppComponent  {
   color = new Color();
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1 [ngStyle]="{color: color.$primary}">Hello</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() color: any;

}

---

这里是演示

您可以使用正确的颜色创建一个类，并将该类用作字符串而不是颜色。由于您的颜色被称为主颜色、次颜色和重音，因此我认为当您将它们输入到组件中时，它们不会有太大的变化。我建议您为此创建一个指令。@trichetriche我有100多个颜色变量的列表，并且希望在.ts文件中用于我的

图表
。有没有一种方法可以在.ts文件中使用全局变量？那么你一定要在指令中对其进行分组。谢谢你的回复。有没有一种方法可以使用已经存在的变量颜色，而不是再次生成变量？这不是我想要的，而是使用已经存在的变量。