单击时更改按钮的背景颜色

Question

我有一个按钮，在点击时将其文本更改为 enable 和 disable。

如何更改按钮颜色，

例如enable 变为绿色，disable

变为红色

<button (click)="enableDisableRule()">{{status}}</button>

组件

toggle = true;
status = 'Enable'; 

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}

感谢任何帮助。谢谢

Answer 1

为此目的，您可以使用 ngClass 指令，使用两个不同的 css 类，它们将根据 toggle 的布尔值触发：

模板：

<button 
    (click)="enableDisableRule()" 
    [ngClass]="{'green' : toggle, 'red': !toggle}">
    {{status}}
</button>

css

.green {
    background-color: green;
}

.red {
    background-color: red;
}

ts

toggle = true;
status = 'Enable'; 

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}

Answer 2

在您的按钮上使用 [ngClass] 以应用适当的样式 class。

<button (click)="enableDisableRule()"
    [ngClass]="{'enabled': toggle, 'disabled': !toggle}">
        {{status}}
</button>

Answer 3

如果只想改变背景颜色，可以使用样式绑定：

<button [style.background-color]="toggle ? 'green' : 'red'" (click)="enableDisableRule()">
  {{status}}
</button>

有关演示，请参阅 this stackblitz。

Answer 4

如果您的默认 toggle 为真，则默认 class 为 .toggle。使用 Css 优先级替换 [ngClass].

<button (click)="enableDisableRule()" class="toggle" [class.btn--disable]="!toggle">{{status}}</button>

对于 Css 订单，toggle 将高于 disable。

.toggle { background-color:green; }
.btn--disable { background-color:red; }

Change background color of the button on click