如何将Angular 2 Material 2中的md-progress-spinner颜色绑定到自定义颜色？

Question

我想使用md-progress-spinner来显示已完成工作的百分比,但我想根据百分比动态地将它的笔触颜色从红色动态更改为绿色.

我怎样才能做到这一点？

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [style.background]="today?.MemorizationStateColor">
</md-progress-spinner>

Answer 1

在寻找我自己的问题的解决方案阅读评论后,我能够提出以下修复.它不漂亮,但是在它们打开颜色属性以接受三种以上颜色之前,这将作为临时解决方案.

微调器是一个SVG圈,所以它的属性可以通过CSS修改.您可以使用笔划更改圆的颜色,使用填充更改圆的背景.

在HTML中:

<mat-spinner class="very-pink"></mat-spinner>

在CSS中:

.very-pink::ng-deep circle {
  stroke: fuchsia;
}

这是一个展示它的stackblitz的链接.

编辑:感谢ConquerorsHaki指出这一点 - / deep /,>>>和:: ng-deep已被弃用.目前他们仍在工作,人们希望在杀死之前提供迁移脚本.也就是说,这不是最佳解决方案.

Answer 2

看一下demo-app示例https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

您需要绑定到[color]属性。

然后，在您的代码中，您可以保留根据百分比值根据需要动态更改颜色的逻辑。例如：

模板：

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [color]="getColor(today?.MemorizationPercent)">
</md-progress-spinner>

功能getColor()示例：

getColor(percentage) {
   return percentage > 50 ? '_red_' : '_green_';
}

您需要在自定义材质调色板中定义颜色。

更新：

'_red_'关于您的颜色的重要通知'_green_'：

进度旋转器的颜色。可以是主要的、重音的或警告的

根据progress-spinner源代码https://github.com/angular/material2/blob/master/src/lib/progress-spinner/progress-spinner.ts#L110

/** The color of the progress-spinner. Can be primary, accent, or warn. */
  @Input()
  get color(): string { return this._color; }
  set color(value: string) {
    if (value) {
      this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`);
      this._renderer.addClass(this._elementRef.nativeElement, `mat-${value}`);
      this._color = value;
    }

所以getColor()变得像这样说：

getColor(percentage) {
   return percentage > 50 ? 'accent' : 'warn';
}

如果您对预构建主题调色板中的任何颜色不满意，则必须创建我们自己的颜色，请参阅https://material.angular.io/guides了解更多详细信息