如何設置墊滑塊顏色動態

Question

我想更改動態滑墊的顏色。 我有一個應用程序，用戶可以從色板中選擇任何一種顏色，我想將該顏色顯示為滑塊顏色。

我知道您可以在color屬性中添加自定義顏色名稱，但就我而言，顏色名稱不是固定的。 可以是色color中的任何顏色。

<mat-slider [(ngModel)]="lifeArea.weighting" [name]="lifeArea.title" thumbLabel="true" color="green" thumbLabel min="0" max="10" step="1"></mat-slider>

在此我將在lifeArea.color獲得顏色代碼

Answer 1

使用材質組件時，“顏色”屬性僅接受主題中默認使用的三種顏色，即主色，警告色和強調色。

如果要為材料組件分配自定義顏色，則可以為其分配類，並為該顏色提供所需的CSS。

就您而言，顏色是動態填充的。 因此，您可以使用ngStyle指令來實現此目的。

Answer 2

據我了解，您無法根據需要設置顏色。 根據“ 角度材料”文檔 ，墊子滑塊顏色應為ThemePalette 。

為此，Angular Material應該支持主要，強調，警告之外的其他顏色，但事實並非如此。

我認為您唯一的選擇是定義一個覆蓋mat-silder樣式的CSS樣式表來設置背景顏色：

1. 定義一個CSS變量，其中包含您的默認Mat-Slider顏色
2. 使用此變量設置所有需要的CSS屬性
3. 更改顏色時更改css變量的值

Answer 3

嘗試這個：

的HTML

<mat-slider [(ngModel)]="lifeArea.weighting" [name]="lifeArea.title" 
thumbLabel="true" [color]="lifeArea.color" thumbLabel min="0" max="10" step="1"></mat-slider>

您需要使用color屬性進行屬性綁定 。