Angular Material：动态更改按钮颜色

Question

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

1. 可点击
2. 禁用
3. 激活

按钮的代码如下：

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

按钮在可点击时是主要(primary)的。当另一个进程开始时，它会被禁用。

从文档中我无法确定如何更改其颜色以表示它现在处于活动状态（例如，当startButton为true时）。是否有办法实现这一点？

- yccteam

---

请查看以下内容： https://angular.cn/api/common/NgClass - GaryB

Answer 1

你可以用多种方式来实现这个功能。

选项1：使用 Material 颜色变体

根据文档，颜色也是一种输入，因此你可以绑定任何你想要的属性。这里“任何”意味着 Material 的ThemePalette。例如：Primary、Warn 和 Accent。

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

在你的组件上，

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

这只是为了让你知道如何使用material ThemePalette更改按钮颜色的想法。使用自己的逻辑来改变颜色。

你会注意到这很基础且受限制。所以我们将看一下第二个选项。

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

使用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的颜色。使用您自己的逻辑！

- ymssa___

---

是的。我刚刚检查了源代码，想写答案，但你比我先了。谢谢！ - yccteam

@yccteam只是想要帮助你。 - ymssa___

Answer 2

另一种方法是：

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

- J.Lex