Question

我有多种颜色想要传递给子组件。颜色= ['＃1e88e5'，'＃e53935'，'＃757575']; 我可以使用硬编码十六进制值按照上面的方法进行操作，但是有一种方法可以像下面那样使用全局变量。颜色= [$ 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演示

Answer 2

您可以执行以下操作

[attr.color] =“颜色”

您可以像这样更新CSS

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

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

2 个答案: