如何导出自定义颜色并在组件中使用它们？答案

【问题标题】：How to export custom colors and use them in components?如何导出自定义颜色并在组件中使用它们？
【发布时间】：2018-09-12 07:45:25
【问题描述】：

我正在尝试在我的一个组件中使用已定义的 Sass 变量，但似乎该颜色不是全局导出的，或者根本不是这样做的。

在我的 style.scss 文件中，我声明了一种颜色 $foo

@import '~@angular/material/theming';

$foo: mat-color($mat-blue, 50);

我正在尝试在我的一个组件中应用这种颜色（就像我使用 primary、accent 或 warn 一样：

<button mat-fab color="foo">
  OK
</button>

但是，这不起作用，我想知道/理解为什么会这样。

我一直在阅读 the docs 和 some tutorials 以及 this guideline 但我似乎找不到任何更详细的内容..

【问题讨论】：

标签： angular

【解决方案1】：

AFAIK 除了 Angular 定义的属性之外，您不能指定其他颜色属性。我不是这方面的专家，但我所做的是创建类并使用它：

$foo: mat-color($mat-blue, 50);

.mat-foo {
  color: $foo !important;
}

然后……

<button mat-fab class="mat-foo">OK</button>

另一种方法是创建attribute directive。这样，如果您更改班级或其他任何内容，则只能在一个地方进行更改。

import {Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[yourappFoo]'
})
export class FooDirective {

  @HostBinding('class.mat-foo') c = true;

  constructor() {
  }
}

...和：

<button mat-fab yourappFoo>OK</button>

【讨论】：