html - Angular 中的错误 TS2322，错误为 "Type ' string' is not assignable to type '"canvas""when using ng-particles

Question

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

 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",
            enable: true,
            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 { }

Answer 1

我终于知道问题出在哪里了。

有一个属性不是 tsparticles 的 Options 对象的一部分

可以看到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 */

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

import { ISourceOptions } from 'tsparticles';

/* omitted for brevity */

options: ISourceOptions = {

像这样。

在所有这些更改之后，一切都很好，希望之后一切都好。