Angular 如何在仅使用角度材质的“mat progress”微调器中添加文本

我使用的是角度材质，希望使用“mat progress”微调器实现类似的效果，如下图所示：

让我分享一下我到目前为止所做的代码片段

<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>

30%

有了这一点，我可以得到与预期相同的结果，但我不想使用最后一行代码，也就是说，我不想为它使用额外的div

是否有任何可能的方法可以扩展mat progress spinner并仅使用材质实现它

---

提前感谢。

您不能只使用材料。但是，如果您只想调用一个组件，而不必每次添加div，那么您可以创建一个自定义组件，其中包含微调器和div，并且在使用它时，您只需编写一行即可。

感谢您的快速回复。我可以理解这个部分，我可以为它创建一个可重用的组件。但实际上我不想使用额外的div，因为它有相对或绝对的位置调整，这可能会在某些地方破坏页面响应性。因此，如果我只能使用材质，这真的很好。如果你真的想要，你可以做的就是在自定义组件中使用材质git并覆盖微调器组件，以实现你想要使用SVG和其他东西的目的：我不知道如何帮助你实现这一点，虽然是的，这是唯一的解决方案，但我想知道如何实现这一点。