Angular2如何更改禁用按钮的颜色答案

【问题标题】：Angular2 how to change color of a disabled buttonAngular2如何更改禁用按钮的颜色
【发布时间】：2021-01-07 00:52:10
【问题描述】：

我有这个按钮

<button class="btn" [disabled]="true">
    <i class="fa fa-heart" aria-hidden="true"></i> Like
</button>

我希望它在禁用时显示为绿色，但不知道该怎么做

【问题讨论】：

你甚至可以使用纯css button.btn[disabled] { background: green; }

标签： angular

【解决方案1】：

用 css

button:disabled {
   background-color: green;
}

【讨论】：

嗯，其实这是处理这个案子的最好办法；）
@JeanPaul A 这可能是最简单的解决方案。谢谢你。

【解决方案2】：

组件

isDisabled: boolean = true;

查看

<button class="btn" [class.green]="isDisabled" [disabled]="isDisabled">
    <i class="fa fa-heart" aria-hidden="true"></i> Like
</button>

css

.green {
 background-color: green;
}

另一种方法是添加ngStyle

【讨论】：

【解决方案3】：

Angular 6. 将删除按钮颜色从“警告”切换为灰色

.btn-delete:disabled{
    .icn-delete{
        color: #9D9D9C;
    }
}

<button mat-icon-button class="btn-delete" [disabled]="array.length==0" (click)="removeAll()">
    <mat-icon aria-label="Icon-button with a delete icon" class="icn-delete" color="warn">delete_forever</mat-icon>
</button>

【讨论】：

【解决方案4】：

JeanPaul A's answer 启发了我：

我有一个带有角材料属性的按钮，并且处于禁用状态。比如：

<button mat-raised-button [disabled]="timeout==1"></button>

要更改此按钮的颜色，我在 CSS 中添加了以下内容：

.mat-raised-button[disabled] {
   background-color: green;
}

【讨论】：

【解决方案5】：

利用[ngClass] 指令。

模板

 <buttontype="submit" [disabled] = "!user.valid" [ngClass] = "{'my-color': !user.valid}">Submit</button>

CSS

.my-color{
 background-color: green;
}

或为您的上述情况喜欢这个

 <buttontype="submit" [disabled] = "!user.valid" [ngClass] = "{'my-color': isDisabled}">Submit</button>

【讨论】：