javascript - ng-circle-progress 组件仅在属性 render OnClick 属性设置为 true 时才起作用

Question

当我在网络浏览器上使用 ng-circle-component 并将“renderOnClick”属性设置为 false 时，看起来组件百分比为 0。只有将此属性设置为 true，单击时才会加载应给予属性(property)。所有其他属性都可以正常工作，包括预定义的属性。

这是使用最新的 ionic (5.2.1) 创建的 ionic 应用程序，已安装 cordova (9.0.0) 并安装了 npm。修改forRoot函数没有解决或影响问题

这是我对组件的调用:

<circle-progress (click)="startTime()"
        [percent]="percent"
        [maxPercent]="100"
        [radius]="radius"
        [showTitle]="false"
        [showSubtitle]="false"
        [showUnits]="false"
        [outerStrokeWidth]="16"
        [outerStrokeColor]="'#239996'"
        [showZeroOuterStroke]="false"
        [backgroundStroke]="'#33003F'"
        [backgroundStrokeWidth]="3"
        [outerStrokeGradient]="true"
        [outerStrokeGradientStopColor]="'#FF00CB'"
        [showInnerStroke]="false"
    ></circle-progress>

其中百分比和半径是我的 ts 文件中的变量

这是组件的预定义:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { NgCircleProgressModule } from 'ng-circle-progress';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    NgCircleProgressModule.forRoot({
      // set defaults here
      radius: 100,
      percent:85,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#CC0000",
      innerStrokeColor: "#C7E596",
      animationDuration:300,
      animation:false,
      responsive:true,
      renderOnClick:false
    })
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

我希望组件在发生变化时立即渲染到所需的百分比(在另一个组件上或设置为 85 之类的值)，但它仅在 renderOnClick 属性打开时渲染百分比

Answer 1

有时，版本更新可能是项目停滞的原因。我也遇到这个问题好几天了，下面是我如何通过在 forRoot 或 html 中设置属性 lazy: false 来解决这个问题

NgCircleProgressModule.forRoot({
      ...
      lazy: false
    }),
    RouterModule.forChild(routes)
  ],

在这里找到了解决方案 https://github.com/bootsoon/ng-circle-progress/issues/85