Question

当我在Web浏览器上使用ng-circle-component且te“ renderOnClick”属性设置为false时，它看起来好像组件百分比为0。仅将此属性设置为true，单击该属性即可加载应该给予财产。所有其他属性都可以正常工作，包括预定义的属性。

这是针对使用最新离子（5.2.1）创建的离子应用，已经安装了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

ng-circle-progress组件仅在属性renderOnClick atribute设置为true时有效

1 个答案: