Question

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

我可以color="primary使用template.html，mat-color($primary)使用style.scss。但是如何使用主题颜色在画布中设置样式？ 如何在我的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中的材质主题。

@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中使用角度材质主题颜色？

2 个答案: