Angular 4条件样式设置：按钮类名切换及禁用样式问题

嘿，我来帮你搞定Angular 4里的条件样式问题，有几种简单直接的方案可以满足你的需求：

一、根据hasUnsavedNotes()切换按钮类名 #

Angular的[ngClass]指令专门用来处理这种动态类的场景，给你两种常用的写法：

1. 对象语法（推荐，多条件场景更清晰） #

把基础类固定写在class属性里，动态类通过条件映射添加：

<button 
  class="button-style standard-button"
  [ngClass]="{
    'button-blue': hasUnsavedNotes(),
    'button-grey': !hasUnsavedNotes()
  }"
>
  你的按钮文本
</button>

当hasUnsavedNotes()返回true时，按钮会带上button-blue类；返回false时则替换成button-grey，基础类始终保留。

2. 三元表达式（简单二选一的场景更简洁） #

如果逻辑只有两种情况，用三元表达式写起来更短：

<button 
  class="button-style standard-button"
  [ngClass]="hasUnsavedNotes() ? 'button-blue' : 'button-grey'"
>
  你的按钮文本
</button>

或者也可以直接拼接完整类名（不过这种写法不如上面的灵活）：

<button 
  [class]="'button-style standard-button ' + (hasUnsavedNotes() ? 'button-blue' : 'button-grey')"
>
  你的按钮文本
</button>

二、禁用状态下修改背景颜色 #

这个需求有两种实现思路，看你的具体场景选择：

1. 纯CSS解决方案（最省心，符合样式与逻辑分离） #

直接利用CSS的:disabled伪类，不需要修改模板逻辑：

.button-style.standard-button:disabled {
  background-color: #cccccc; /* 替换成你想要的灰色 */
  cursor: not-allowed; /* 可选：禁用时显示禁止光标 */
  opacity: 0.8; /* 可选：增加透明度区分状态 */
}

只要按钮的disabled属性为true，这个样式就会自动生效，不需要额外的Angular指令。

2. 结合[disabled]与[ngClass]（复杂逻辑场景） #

如果禁用状态的样式需要和其他条件联动，也可以把禁用状态和类名绑定在一起：

<button 
  class="button-style standard-button"
  [disabled]="!hasUnsavedNotes()"
  [ngClass]="hasUnsavedNotes() ? 'button-blue' : 'button-grey'"
>
  你的按钮文本
</button>

这里按钮的禁用状态直接和hasUnsavedNotes()挂钩，同时类名也跟着切换，一举两得。

内容的提问来源于stack exchange，提问作者Phil O