如何在 TypeScript / JavaScript 中使用角度材质主题颜色？答案

【问题标题】：How to use angular material theme color in TypeScript / JavaScript?如何在 TypeScript / JavaScript 中使用角度材质主题颜色？
【发布时间】：2018-05-27 06:12:02
【问题描述】：

我不知道如何获取主要主题颜色（Angular Material），例如component.ts。

我可以在我的template.html 中使用color="primary 或在style.scss 中使用mat-color($primary)。但是如何使用主题颜色为画布内的元素设置样式？ 如何在我的 TypeScript 代码中使用它们？

信息：

"@angular/material": "^5.0.0-rc.2",
"@angular/core": "^5.0.0"

【问题讨论】：

标签： angular typescript angular-material angular-ui angular-material2

【解决方案1】：

我使用了一个 hacky 解决方案。它不漂亮，但很有效。

component.html

<div #primary class="mat-button mat-primary" style="display:none"></div>

component.ts

declare let getComputedStyle: any;

export class Component implements AfterViewInit {
    @ViewChild('primary') primary: ElementRef;

    ngAfterViewInit() {
       const primaryColor = getComputedStyle(this.primary.nativeElement).color;
    }

【讨论】：

他们真的应该让某种 Palette 对象可注入到组件中，所以当我们需要使用 Chart.js 之类的库时。它更容易从材料调色板中实现。我将使用这种方法。谢谢:)
@Daniel 是我们使用的primaryColor 吗？控制台日志时显示未定义。
@surazzarus 你应该得到一个 rgb 颜色字符串。如果没有，请检查您是否在模板中添加了 html 代码并声明了 getComputedStyle。

【解决方案2】：

我使用您的解决方案作为基础，因为我有多个图表和组件需要在 js 中设置颜色。希望在使用多个图表或使用颜色的第三方 js 组件时，这更可重用和可扩展，并且您希望这些颜色来自 Material 主题或调色板。

@Component({
    selector: 'app-theme-emitter',
    template: `<div class='primary'></div>
               <div class='accent'></div>
               <div class='warn'></div>`,
    styles: [':host { display: none; }']
})
export class ThemeEmitterComponent implements AfterViewInit {

    primaryColor: string;
    accentColor: string;
    warnColor: string;

    @ViewChild('primary') primaryElement: ElementRef;
    @ViewChild('accent') accentElement: ElementRef;
    @ViewChild('warn') warnElement: ElementRef;

     ngAfterViewInit() {
        this.primaryColor = getComputedStyle(this.primaryElement.nativeElement).color;
        this.accentColor = getComputedStyle(this.accentElement.nativeElement).color;
        this.warnColor = getComputedStyle(this.primaryElement.nativeElement).color;
     }
}

创建了一个_theme mixin，并在scss中传入了material theme。

@mixin theme-emitter($theme) {

    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);

    app-theme-emitter {
        .primary {
            color: mat-color($primary);
        }
        .accent {
            color: mat-color($accent);
        }
        .warn {
            color: mat-color($warn);
        }
    }
}

在你的 main.scss 中

...

$theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette);
@include theme-emitter($theme);

然后在你想要使用这些颜色的组件内部：

<app-theme-emitter></app-theme-emitter>

@ViewChild(ThemeEmitterComponent) theme: ThemeEmitterComponent;

这对我来说似乎工作得很好，你觉得呢？

I submitted this as a feature request for Material2.

【讨论】：