Angular 中的错误 TS2322 错误“类型‘字符串’在使用 ng-particles 时不能分配给类型‘‘画布’”

如何解决Angular 中的错误 TS2322 错误“类型‘字符串’在使用 ng-particles 时不能分配给类型‘‘画布’”

我试图在主屏幕组件中使用particles.js。我已经安装了 "npm install ng-particles" 和 "npm install tsparticles." 服务并重新启动并与其他项目进行比较后，我似乎无法弄清楚。下面是我收到的错误，尽管当我 ng-serve 时它仍然在 localhost 上运行。我对打字稿和角度很陌生，所以我真的不明白这个错误。

 Error: src/app/home/home.component.html:2:33 - error TS2322: Type '{ background: { color: { value: string; }; }; fpsLimit: number; interactivity: { detectsOn: string; events: { onClick: { enable: boolean; mode: string; }; onHover: { enable: boolean; mode: string; }; resize: boolean; }; modes: { ...; }; }; particles: { ...; }; detectRetina: boolean; }' is not assignable to type 'RecursivePartial<IOptions>'.        
  The types of 'interactivity.detectsOn' are incompatible between these types.
    Type 'string' is not assignable to type '"canvas" | InteractivityDetect | "parent" | "window" | undefined'.

2     <Particles id="tsparticles" [options]="particlesOptions"></Particles>
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/home/home.component.ts:6:16
    6   templateUrl: './home.component.html',~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.

Home.component.html

    <div class="particle-background">
    <Particles id="tsparticles" [options]="particlesOptions"></Particles> 
</div>

Home.component.ts

 import { Component,OnInit } from '@angular/core';
import { NgParticlesModule } from 'ng-particles';  

@Component({
  selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  
  particlesOptions = {
    background: {

        color: {
            value: "white"
        }

    },fpsLimit: 60,interactivity: {

        detectsOn: "canvas",events: {
            onClick: {
                enable: true,mode: "push"
            },onHover: {
                enable: true,mode: "repulse"
            },resize: true
        },modes: {
            bubble: {
                distance: 400,duration: 2,opacity: 0.8,size: 30,speed: 1
            },push: {
                quantity: 4
            },repulse: {
                distance: 100,duration: 0.4
            }
        }

    },particles: {

        color: {
            value: "#a9a9a9"
        },links: {
            color: "#a9a9a9",distance: 200,enable: true,opacity: 0.7,width: 1.5
        },collisions: {
            enable: true
        },move: {
            direction: "none",outMode: "bounce",random: false,speed: 2,straight: false
        },number: {
            density: {
                enable: true,value_area: 800
            },value: 80
        },opacity: {
            value: 1
        },shape: {
            type: "diamond"
        },size: {
            random: true,value: 3
        }

    },detectRetina: true
};

}

App.module.ts

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ResumeComponent } from './resume/resume.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { ProjectsComponent } from './projects/projects.component';
import { HomeComponent } from './home/home.component';
import { NgParticlesModule } from 'ng-particles';




@NgModule({
  declarations: [
    AppComponent,ResumeComponent,AboutComponent,ContactComponent,ProjectsComponent,HomeComponent
  ],imports: [
    browserModule,AppRoutingModule,NgParticlesModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

解决方法

我终于知道是什么问题了。

有一个属性不属于 Options 的 tsparticles 对象

你可以看到它here

/* omitted for brevity */
    modes: {
        bubble: {
            distance: 400,duration: 2,opacity: 0.8,size: 30,speed: 1 // this is the property to remove
        },/* omitted for brevity */

但是您可以使用 options 中的 Home 类型键入 ISourceOptions 组件的 tsparticles 变量以避免任何其他问题。

import { ISourceOptions } from 'tsparticles';

/* omitted for brevity */

options: ISourceOptions = {

像这样。

经过所有这些更改后，一切正常，希望之后一切顺利。