javascript - 如何在 Angular 项目中使用 ng-circle-progress src 代码？

Question

我正在使用 angular 6，我想使用 ng-circle-progress .我实现了圆圈，但我想改变一些我认为我应该从 src 代码做的事情。圆圈中有 units 和 title 选项，我希望它们彼此靠近。我该怎么做？

app.module.ts

import {
  NgCircleProgressModule
} from 'ng-circle-progress';

imports: [
  CommonModule,
  RouterModule.forChild(HomeRoutingModule),
  NgCircleProgressModule.forRoot({
    "units": "Liter",
    "outerStrokeLinecap": "butt"
  })
]

home.component.html

<circle-progress
    [percent]="65"
    [radius]="100"
    [outerStrokeWidth]="8"
    [innerStrokeWidth]="2"
    [outerStrokeColor]=tank.outerColor
    [innerStrokeColor]="'#e2e2e2'"
    [animation]="true"
    [animationDuration]="300"
    [space]="5"
    [showSubtitle]= "false"
    [showUnits]= "true"
    [unitsFontSize]= "15"
    [titleFontSize]= "45"
    [clockwise]= "false">
</circle-progress>

这是输出图像。如何控制 65 和 liter 之间的空间？

Answer 1

要控制外圈和内圈之间的空间，请调整“空间”选项。 如果您想减少圆圈之间的空间，请使用负值。

像这样:

<circle-progress
    ..... //other options
    [space]="-5"
    ..... //other options
</circle-progress>

如果你想为应用程序中的所有进度条设置一个默认值，你可以像这样在导入中添加这个选项:

imports: [
    NgCircleProgressModule.forRoot({
        space = -5
      })
]