angular2-multiselect-dropdown如何根据标签名自定义背景色

当前存在根据标签名称设置差异化背景色的开发需求，查阅组件官方文档未找到相关功能配置说明，目标效果参考：

该组件没有提供直接通过settings配置项设置单标签差异化背景色的原生属性，可通过以下两种方案实现需求，优先使用第一种自定义模板方案，稳定性和灵活度最高。

方案1：使用组件内置的自定义选中项模板实现（推荐） #

组件原生支持传入自定义模板替换默认选中标签的渲染逻辑，不需要修改组件源码，无版本兼容风险。

• 编写标签与颜色的映射逻辑

// 组件TS文件
dropdownSettings = {
  // 保留原有业务配置即可，不需要额外新增特殊配置
  singleSelection: false,
  textField: 'itemName',
  enableSearchFilter: true
};

// 按标签名返回对应背景色
getTagBg(tagName: string): string {
  const colorMap: Record<string, string> = {
    '高优先级': '#f5222d',
    '中优先级': '#faad14',
    '低优先级': '#52c41a'
    // 按业务需求补充所有标签的色值映射
  };
  return colorMap[tagName] || '#8c8c8c'; // 未匹配到的标签使用默认兜底色
}

• 传入自定义标签模板

<angular2-multiselect
  [data]="tagList"
  [(ngModel)]="selectedTags"
  [settings]="dropdownSettings"
>
  <!-- 替换默认选中标签渲染结构 -->
  <c-item>
    <ng-template let-item="item">
      <span 
        class="custom-tag"
        [style.background-color]="getTagBg(item.itemName)"
      >
        {{item.itemName}}
      </span>
    </ng-template>
  </c-item>
</angular2-multiselect>

• 覆盖默认标签样式

.custom-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  margin: 2px;
}

/* 清除组件默认标签的自带背景、边框、内边距 */
:host ::ng-deep .selected-item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

方案2：CSS强制覆盖样式（仅适合标签固定的简单场景） #

如果标签数量少且名称长期固定，也可以在标签渲染完成后，通过JS根据标签文本给对应DOM节点添加专属类名，再通过CSS设置对应类的背景色。

该方案依赖组件渲染后的DOM结构，组件版本迭代如果修改标签DOM类名或结构，样式会直接失效，不推荐在中大型项目中使用。

内容的提问来源于stack exchange，提问作者Jay Raj Mishra