Angular 材质：动态改变按钮颜色

Question

我有一个具有 3 种可能状态的按钮：

1. 可点击
2. 残疾人
3. 积极的

按钮的代码是这样的：

<button mat-raised-button
              color="primary"
              [disabled]="anotherStarted"
              (click)="startButton = true">START</button>

该按钮是primary可点击的。当另一个进程启动时它被禁用。

我从文档中无法弄清楚如何更改其颜色以表明它现在处于活动状态（例如，当 startButton 为 true 时）。

有没有办法做到这一点？

Answer 1

在这里，您可以通过多种方式执行此操作。

选项 1：使用材质颜色变化

根据文档，颜色也是一个输入，因此您可以绑定任何您想要的属性。这里any指的是物质ThemePalette。例如：主要、警告和强调

<button mat-raised-button
              [color]="paletteColour"
              [disabled]="anotherStarted"
              (click)="startButton = true; change()">START</button>

在你的组件上，

paletteColour = 'primary';
change() {
 paletteColour = 'warn';
}

这只是为了让您了解如何使用材质 ThemePalette 更改按钮颜色。使用你自己的逻辑来改变颜色。

您会注意到这是非常基本且有限的。所以我们来看看选项 2。

选项 2：使用角度样式属性绑定

使用 Angularstyle.background-color属性，您可以绑定任何您想要的颜色。

<button mat-raised-button
              [style.background-color]="btnColour"
              [disabled]="anotherStarted"
              (click)="startButton = true; change()">START</button>

在你的组件上，

btnColour= 'red';
change() {
 btnColour= 'green';
}

希望您能够对动态更改颜色有一个清晰的了解mat-button。用你自己的逻辑。！