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

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 修改它的属性。您可以使用 stroke 更改圆圈的颜色，并使用 fill 更改圆圈的背景。

在 HTML 中:

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

在 CSS 中:

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

这里是一个链接 stackblitz演示它。

编辑:感谢 ConquerorsHaki 指出这一点 - /deep/, >>> and ::ng-deep have been deprecated 。目前他们还在工作，人们希望在他们杀死它之前提供一个迁移脚本。也就是说，这不是最佳解决方案。