如何通過 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>