在 component.ts Angular 中使用可變顏色

Question

我有一組顏色，我想傳遞給子組件。

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

我可以像上面那樣使用硬編碼十六進制值來做到這一點，但是有沒有一種方法可以像下面那樣使用全局變量。

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

由於我想在組件上而不是在scss上使用全局變量，我不確定如何使用它。

任何幫助表示贊賞。

謝謝

Answer 1

您可以創建類並傳遞給子組件

這是一個例子，

color.ts

export class Color {

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

在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演示