Используйте переменный цвет в component.ts Angular

Question

У меня есть массив цветов, которые я хотел бы передать дочернему компоненту.

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

Я могу сделать это, как указано выше, с шестнадцатеричными значениями жесткого кода, но есть ли способ использовать глобальную переменную вместо этого, как показано ниже.

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

Поскольку я хотел бы использовать глобальную переменную для компонента, а не для scss, я не уверен, как я могу его использовать.

Любая помощь приветствуется.

Спасибо

Answer 1

Вы можете сделать что-то вроде этого

[attr.color] = "цвет"

вы можете обновить css примерно так

   :host ::ng-deep app-component {
            background-color: attr(color);
            ......
    }

Answer 2

Вы можете создать класс и передать его дочернему компоненту

вот пример,

color.ts

export class Color {

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

in app.component.ts

import { Color} from './color';

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

и hello.component.ts

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;

}

здесь Stackblitz демо