如何设置MAT扫描的颜色动力学

Question

我想更改垫子斜线颜色动态。我有一个应用程序，用户可以从色泽中选择任何颜色，我想将其显示为滑块颜色。

我知道您可以在颜色属性中添加自定义颜色名称，但是在我的情况下，颜色名称未修复。它可以是颜色的任何颜色。

<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

，据我所知，您无法按需设置颜色。根据角度材料文档，垫子的颜色应为ThemePalette。

要执行此角材料，应支持主，口音，警告外的其他颜色，但事实并非如此。

我认为您唯一的选择是定义CSS Stylesheet覆盖垫子样式以设置您的背景颜色：

1. 定义包含您默认垫子颜色的CSS变量
2. 使用此变量设置所有需要的CSS属性
3. 当颜色更改时，更改CSS变量的值

Answer 2

在使用材料组件时，颜色属性仅接受三种颜色，即主题中默认的主要，警告和口音。

如果您想为材料组件分配自定义颜色，则可以为其分配类并提供该颜色所需的CSS。

在您的情况下，颜色是动态填充的。因此，您可以使用ngstyle指令来实现这一目标。

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属性进行属性绑定。