Question

我想根据该值更改垫子滑块背景的颜色，即每个值都有关联的颜色。

我看到我可以像这样覆盖背景颜色：

::ng-deep .mat-accent .mat-slider-track-fill {
  background-color: red;
}

但是我应该如何动态设置它？

Answer 1

我将为每个值/颜色创建CSS类，然后使用ngClass动态分配。

HTML

public abstract class UseCaseHandlerProxy<TRequest, TResponse> : IUseCaseHandler<TRequest, TResponse>
    where TRequest : IRequest
    where TResponse : Response
{
    private IValidator<TRequest> Validator { get; }
    protected internal IUnitOfWork UnitOfWork { get; }


    public UseCaseHandlerProxy(IUnitOfWork unitOfWork, IValidator<TRequest> validator)
    {
        Validator = validator;
        UnitOfWork = unitOfWork;
    }

    async Task<TResponse> IUseCaseHandler<TRequest, TResponse>.HandleAsync(TRequest request)
    {
        ValidationResult validationResult = await Validator.ValidateAsync(request);

        TResponse response;

        if (!validationResult.IsValid)
        {
            response = (TResponse)System.Activator.CreateInstance(typeof(TResponse));

            validationResult.Errors.ToList().ForEach(error => response.AddError(error.PropertyName, error.ErrorMessage));

            return response;
        }

        response = await UseCaseHandler(request);

        return response;
    }

    public abstract Task<TResponse> UseCaseHandler(TRequest request);
}

CSS

<div id='container' [ngClass]="['slider-bg-' + slider.value]">
  <md-slider #slider min="1" max="5" step="1" value="1"></md-slider>
</div>

示例堆叠闪电战：https://angular-material-dfpafj.stackblitz.io

Answer 2

我将为每个值/颜色创建CSS类，然后使用动态容器ID覆盖子滑块的CSS类。

HTML

<div id="{{'container-' + slider.value}}">
  <md-slider #slider min="1" max="5" step="1" value="1"></md-slider>
</div>

CSS

#container-1 /deep/ .mat-accent .mat-slider-track-fill {
  background: red!important;
}

#container-2 /deep/ .mat-accent .mat-slider-track-fill {
  background: blue!important;
}

#container-3 /deep/ .mat-accent .mat-slider-track-fill {
  background: green!important;
}

#container-4 /deep/ .mat-accent .mat-slider-track-fill {
  background: yellow!important;
}

#container-5 /deep/ .mat-accent .mat-slider-track-fill {
  background: purple!important;
}

示例堆叠闪电战：https://angular-material-p9y14r.stackblitz.io

垫滑块动态背景色

2 个答案: