如何实现Angular组件颜色的通用动态配置？

1. 重构Component1的TypeScript代码 #

去掉冗余的布尔属性，改用输入属性直接接收目标样式类名，或从data对象中读取color字段：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.scss']
})
export class Component1 {
  // 方式1：直接接收样式类名输入
  @Input() imageBannerClass?: string;

  // 方式2：兼容你期望的data对象格式，读取color字段
  @Input() data?: { color?: string };

  // 可选：兼容旧代码逻辑，根据原布尔参数映射类名
  constructor(args?: { redImageBanner?: boolean; greyImageBanner?: boolean; orangeDarkImageBanner?: boolean }) {
    if (args) {
      if (args.redImageBanner) this.imageBannerClass = 'brand-error-image-banner';
      else if (args.greyImageBanner) this.imageBannerClass = 'graphite-grey-image-banner';
      else if (args.orangeDarkImageBanner) this.imageBannerClass = 'graphite-orange-image-banner';
    }
  }
}

2. 简化Component1的HTML模板 #

直接绑定动态样式类，无需大量条件判断：

<!-- 对应方式1：直接使用imageBannerClass -->
<div [ngClass]="imageBannerClass"></div>

<!-- 对应方式2：读取data中的color字段 -->
<div [ngClass]="data?.color"></div>

3. 优化SCSS代码，复用公共样式 #

将高度、外边距等公共样式抽成混合宏，新增颜色时仅需定义背景色：

// 定义公共样式混合宏
@mixin image-banner-common {
  height: 164px;
  margin: -24px -24px 24px;
}

// 各个颜色样式类，复用公共宏
.brand-error-image-banner {
  @include image-banner-common;
  background-color: $brand-error;
}

.graphite-grey-image-banner {
  @include image-banner-common;
  background-color: $graphite-3;
}

.graphite-orange-image-banner {
  @include image-banner-common;
  background-color: $brand-orange-light;
}

// 新增颜色只需添加以下代码
// .new-color-image-banner {
//   @include image-banner-common;
//   background-color: $new-color;
// }

4. Component2的调用方式 #

现在可以直接传递目标样式类名，写法更简洁：

<!-- 方式1：直接传入样式类名 -->
<component1 imageBannerClass="graphite-orange-image-banner"></component1>

<!-- 方式2：使用你期望的data对象格式 -->
<component1 [data]="{color: 'brand-error-image-banner'}"></component1>

方案优势 #

• 新增颜色时仅需在SCSS中添加一行样式类代码，无需修改TS和HTML
• 调用逻辑直观，无需维护多个布尔属性
• 代码冗余度大幅降低，后续维护成本更低

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