如何在 TypeScript / JavaScript 中使用 angular material 主题颜色？

Question

我不知道如何获得主要主题颜色 (Angular Material) 例如component.ts。

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

信息：

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

Answer 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;
    }

Answer 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 主题。

@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.

如何在 TypeScript / JavaScript 中使用 angular material 主题颜色？

How to use angular material theme color in TypeScript / JavaScript?

typescript

angular-ui

angular-material

angular-material2

angular