我有一系列颜色,我想传递给子组件。
colors = ['#1e88e5', '#e53935', '#757575'];
我可以像上面的硬编码十六进制值那样做,但有一种方法可以使用全局变量,如下所示。
colors = [$primary, $secondary, $normal];
由于我想在组件上使用全局变量而不是scss
,我不知道如何使用它。
任何帮助表示赞赏。
谢谢
您可以创建类并传递给子组件
这是一个例子,
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演示
你可以做这样的事情
[attr.color] = “彩色”
你可以像这样更新css
:host ::ng-deep app-component {
background-color: attr(color);
......
}