在Angular 16中使用NPM的ng-circle-progress组件的方法是什么?

huangapple go评论104阅读模式
英文:

Getting the NPM ng-circle-progress Component to work in Angular 16?

问题

尝试在 Angular 16 中使用 NG Circle Progress 组件,以下是你提供的代码和配置。

模板配置如下:

<circle-progress name="A" [options]="optionsA" [renderOnClick]="false" class="copy"
(click)="copyOptions($event, optionsA)"></circle-progress>

组件选项在 main.ts 中配置如下:

optionsA = {
  percent: 85,
  radius: 60,
  showBackground: false,
  outerStrokeWidth: 10,
  innerStrokeWidth: 5,
  subtitleFormat: false,
  startFromZero: false,
};

根据 README.md,模块配置如下:

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [
    CommonModule,
    NgCircleProgressModule.forRoot({
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: '#78C000',
      innerStrokeColor: '#C7E596',
      animationDuration: 300,
    }),
  ],

模块配置会产生以下错误:

Type 'ModuleWithProviders<NgCircleProgressModule>' is not assignable to type 'readonly any[] | Type<any>'.(2322)
(alias) class NgCircleProgressModule
import NgCircleProgressModule

你有什么想法?

英文:

Trying to get the NG Circle Progress component to work in Angular 16.

This is the Stackblitz.

This is the template configuration.

  &lt;circle-progress name=&quot;A&quot; [options]=&quot;optionsA&quot; [renderOnClick]=&quot;false&quot; class=&quot;copy&quot;
  (click)=&quot;copyOptions($event, optionsA)&quot;&gt;&lt;/circle-progress&gt;

And this are the component options in main.ts.

  optionsA = {
    percent: 85,
    radius: 60,
    showBackground: false,
    outerStrokeWidth: 10,
    innerStrokeWidth: 5,
    subtitleFormat: false, // clear subtitleFormat coming from other options, because Angular does not assign if variable is undefined.
    startFromZero: false,
  };

And the module configuration is specified according to the README.md.

@Component({
  selector: &#39;my-app&#39;,
  standalone: true,
  imports: [
    CommonModule,
    NgCircleProgressModule.forRoot({
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: &#39;#78C000&#39;,
      innerStrokeColor: &#39;#C7E596&#39;,
      animationDuration: 300,
    }),
  ],

The module configuration produces the following error.

Type &#39;ModuleWithProviders&lt;NgCircleProgressModule&gt;&#39; is not assignable to type &#39;readonly any[] | Type&lt;any&gt;&#39;.(2322)
(alias) class NgCircleProgressModule
import NgCircleProgressModule

Thoughts?

答案1

得分: 1

XXModule.forRoot()方法返回提供者,这个调用应该放在组件配置的提供者部分。

同时你需要保留导入语句。

所以它应该像下面这样:

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, NgCircleProgressModule],
  providers: [
    (NgCircleProgressModule.forRoot({
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: '#78C000',
      innerStrokeColor: '#C7E596',
      animationDuration: 300,
    }) as ModuleWithProviders<NgCircleProgressModule>).providers!,
  ],
  template: `
  <circle-progress name="A" [options]="optionsA" [renderOnClick]="false" class="copy"
  (click)="copyOptions($event, optionsA)"></circle-progress>
`,
})

另外,circle-progress组件的选项被定义为CircleProgressOptions而不是CircleProgressOptionsInterface,这个实现更加严格,因此optionsA需要具有CircleProgressOptions的所有属性。可以像这样添加它们:

optionsA: CircleProgressOptions = {
  ...this.options,
  percent: 85,
  radius: 60,
  showBackground: false,
  outerStrokeWidth: 10,
  innerStrokeWidth: 5,
  subtitleFormat: false, // 清除来自其他选项的subtitleFormat,因为如果变量未定义,Angular不会分配它。
  startFromZero: false,
};

这里有一个可工作的实现。

英文:

XXModule.forRoot() methods return providers, this call belongs into the provider part of the component configuration.

Also you'll need to keep the import.

So it should look like following:

@Component({
  selector: &#39;my-app&#39;,
  standalone: true,
  imports: [CommonModule, NgCircleProgressModule],
  providers: [
    (NgCircleProgressModule.forRoot({
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: &#39;#78C000&#39;,
      innerStrokeColor: &#39;#C7E596&#39;,
      animationDuration: 300,
    }) as ModuleWithProviders&lt;NgCircleProgressModule&gt;).providers!,
  ],
  template: `
  &lt;circle-progress name=&quot;A&quot; [options]=&quot;optionsA&quot; [renderOnClick]=&quot;false&quot; class=&quot;copy&quot;
  (click)=&quot;copyOptions($event, optionsA)&quot;&gt;&lt;/circle-progress&gt;
`,
})

In addition, the circle-progress component's options are typed as CircleProgressOptions instead of CircleProgressOptionsInterface and this implementation is more strict, therefore optionsA needs to have all the properties of CircleProgressOptions. They can be added like this:

  optionsA: CircleProgressOptions = {
    ...this.options,
    percent: 85,
    radius: 60,
    showBackground: false,
    outerStrokeWidth: 10,
    innerStrokeWidth: 5,
    subtitleFormat: false, // clear subtitleFormat coming from other options, because Angular does not assign if variable is undefined.
    startFromZero: false,
  };

Here's a working implementation..

huangapple
  • 本文由 发表于 2023年8月9日 00:48:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/76861644.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定