Angular如何正确使用ngClass设置多条件样式类

你的判断完全准确。Angular 的ngClass指令处理对象类型入参时，不会把对象的每个key当成不可拆分的整段类名，而是会先按空格把每个key拆成独立的单个CSS类，再根据对应value的布尔值，逐个执行添加/移除操作。
你的代码里两个条件分支的key都包含px-4、py-2两个公共类：

• 当size === 'md'时，第一个分支值为true，px-4、py-2、text-sm三个类被添加
• 同时第二个分支值为false，Angular会把该key拆分出的px-4、py-2、text-base三个类全部移除
  最终DOM上只会保留第一个分支独有的text-sm类，和你观察到的异常表现完全一致。

以下三种写法都可以解决这个问题，根据场景选择即可：

• 方案1：拆分公共类（推荐）
  把所有尺寸分支共用的类直接写在原生class属性上，仅把存在条件差异的类放到ngClass中，性能最优、可读性最高：

<button
  class="px-4 py-2"
  [ngClass]="{
    'text-sm': size === 'md',
    'text-base': size === 'lg'
  }"
>
  My Button
</button>

• 方案2：组件类定义类名映射
  如果公共类后续可能调整、不想在模板里拆分，可以在组件类中写getter或者方法，根据当前size直接返回对应完整类串，模板直接绑定返回值即可：

// 组件TS文件中
get buttonSizeClasses(): string {
  switch (this.size) {
    case 'md': return 'px-4 py-2 text-sm';
    case 'lg': return 'px-4 py-2 text-base';
    default: return '';
  }
}

<button [ngClass]="buttonSizeClasses">
  My Button
</button>

• 方案3：模板内直接写条件返回
  简单分支场景下不需要写TS逻辑，直接在模板中用嵌套三元表达式返回对应类串即可：

<button
  [ngClass]="size === 'md' ? 'px-4 py-2 text-sm' : size === 'lg' ? 'px-4 py-2 text-base' : ''"
>
  My Button
</button>

提示：在Angular中搭配Tailwind使用ngClass时，尽量不要在对象格式的key中写空格分隔的多类组合，只要不同key之间存在重复类名，就会触发这类公共类被误移除的问题。

内容的提问来源于stack exchange，提问作者Matthieu Alcaro