如何僅使用有角度的材料在 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 的自定義組件，當您使用它時，您將擁有一行寫。