如何在 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);
然后在你想要使用这些颜色的组件内部:
<app-theme-emitter></app-theme-emitter>
@ViewChild(ThemeEmitterComponent) theme: ThemeEmitterComponent;
这对我来说似乎工作得很好,你觉得呢?
I submitted this as a feature request for Material2.
【讨论】:
以上是关于如何在 TypeScript / JavaScript 中使用角度材质主题颜色?的主要内容,如果未能解决你的问题,请参考以下文章
在 Mac OS 上使用 TypeScript 编写 ASP.NET 5 应用
有没有办法禁用 Typescript 2.4 版引入的弱类型检测?