问题描述
我试图在主屏幕组件中使用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 = {
像这样。
经过所有这些更改后,一切正常,希望之后一切顺利。