如何仅使用有角度的材料在 mat-progress-spinner 中添加文本

Question

我正在使用有角度的材料，并希望使用 mat-progress-spinner 来实现如下图所示的效果：

让我分享一下我迄今为止所做的相同代码片段。

<mat-progress-spinner color="accent" style="position: absolute;" [mode]="mode" [value]=100 [strokeWidth]=6 [diameter]=80></mat-progress-spinner>
<mat-progress-spinner color="warn"  [mode]="mode" [value]=60 [strokeWidth]=6 [diameter]=80></mat-progress-spinner>
<div style="position:relative; top: -48px; left: 30px;">30%</div>

有了这个，我就可以得到所需的结果，但我不想使用最后一行代码，即我不想为此使用额外的 div。

有什么可能的方法可以扩展 mat-progress-spinner 并仅使用材料来实现它。

提前致谢。

Answer 1

你不能只用材料来做。 但是，如果您只想调用一个组件来执行此操作，而不必每次都添加一个 div，那么您可以做的是创建一个包含微调器和 div 的自定义组件，当您使用它时，您将拥有一行写。