如何通过 html (Angular) 更改 mat-slide-toggle 的颜色

Question

对于一个项目，我使用了材料库的 mat-slide-toggle。 现在我想更改滑块和圆圈的颜色，它们是mat-slide-toggle-bar和mat-slide-toggle-thumb 。 我可以通过 css 文件设置两者的background-color ，但这里有一个问题。 我有几个滑动开关，它们都需要不同的颜色。 颜色在组件中可用的数据集中定义。 我可以在 html 中访问此数据集，但不能在 css 中访问。 我不能在mat-slide-toggle上使用style="background-color: ..."因为它不在正确的班级上。 我需要的两个类在 html 中不直接可见。

Html 看起来像这样：

<span *ngFor="let data of dataSets">
<mat-slide-toggle (change)="toggleDataSet($event)">{{data.label}}</mat-slide-toggle>
</span>

因此，我需要访问 css 中的数据集，或者以某种方式能够在 html 中不可见的嵌套类上设置背景颜色。 有没有办法做到这一点？

Answer 1

要动态更改滑块的颜色，您可以创建一个Directive ，接收圆圈的颜色和滑块的颜色作为输入。 该指令在元素上添加属性并添加更改颜色所需的样式：

此处为更改进度条的颜色提供了类似的答案： Change angular material progress bar color from code 。

您需要的指令如下所示：

@Directive({
  selector: '[sliderColor]'
})
export class SliderColorDirective implements OnChanges {
  static sliderNumberCounter = 0;

  @Input() circleColor: number;
  @Input() sliderColor: number;
  styleElement: HTMLStyleElement = document.createElement('style');

  attributeName: string;

  constructor(private el: ElementRef) {
    this.attributeName = `slider-color-${SliderColorDirective.sliderNumberCounter}`;
    SliderColorDirective.sliderNumberCounter++;
    const nativeEl: HTMLElement = this.el.nativeElement;
    nativeEl.setAttribute(this.attributeName, '');
    nativeEl.appendChild(this.styleElement);
  }

  ngOnChanges(): void {
    this.setColors();
  }

  setColors(): void {
    this.styleElement.innerText = `
      [${this.attributeName}] .mat-slide-toggle-bar {
        background-color: ${this.sliderColor};
      }
      [${this.attributeName}] .mat-slide-toggle-thumb {
        background-color: ${this.circleColor};
      }
    `;
  }
}

该指令可以这样使用：

<mat-slide-toggle sliderColor [sliderColor]="'red'" [circleColor]="'black'">{{data.label}}</mat-slide-toggle>