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

Posted

技术标签:

【中文标题】如何在 TypeScript / JavaScript 中使用角度材质主题颜色?【英文标题】:How to use angular material theme color in 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"

【问题讨论】:

【参考方案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);

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

&lt;app-theme-emitter&gt;&lt;/app-theme-emitter&gt;

@ViewChild(ThemeEmitterComponent) theme: ThemeEmitterComponent;

这对我来说似乎工作得很好,你觉得呢?

I submitted this as a feature request for Material2.

【讨论】:

以上是关于如何在 TypeScript / JavaScript 中使用角度材质主题颜色?的主要内容,如果未能解决你的问题,请参考以下文章

TypeScript 这十年

在 Mac OS 上使用 TypeScript 编写 ASP.NET 5 应用

有没有办法禁用 Typescript 2.4 版引入的弱类型检测?

元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型 React Typescript

V8中的快属性与内联缓存

V8中的快属性与内联缓存