如何仅使用角形材料在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的自定义组件，并且在使用时，您只需要写一行。