Question

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

可点击
已禁用
活动

按钮的代码如下：

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

可点击时，该按钮为primary。当另一个进程开始时，它被禁用。

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

有办法吗？

Answer 1

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

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

根据documentation颜色也是输入，因此您可以绑定所需的任何属性。这里的任何意思是物质ThemePalette。例如：主要，警告和重音符号

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

在您的组件上，

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

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

您会注意到这非常基本和有限。因此，我们接下来将继续工作。

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

使用Angular style.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的颜色。用你自己的逻辑。！

Answer 2

另一种方法是：

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

角度材质：动态更改按钮颜色

2 个答案: