更改点击按钮的背景颜色

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';
}

Demo

Answer 2

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

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

有关演示，请参见this stackblitz。

Answer 3

使用按钮上的[ngClass]应用适当的样式类。

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

Answer 4

如果您的默认[为true，则该默认类为(。使用Css优先级替换toggle。

.toggle

对于Css顺序，[ngClass]将高于<button (click)="enableDisableRule()" class="toggle" [class.btn--disable]="!toggle">{{status}}</button> 。

toggle