How to import and use particles.js in an Angular/Angular2/Angular4 app

问题

I have an Angular app that I want to use particles.js in however I have no clue how to add it and get it working.

I've added it to the .angular-cli.json

  "scripts": [
    "../node_modules/particles.js/particles.js"
  ],

And I've imported it into my component

import * as  particlesJS from 'particles.js';

And attempted to initialize it using

  particlesJS.load('particles-js', 'assets/particles.json', function() {
    console.log('callback - particles.js config loaded');
  });

Has anyone got this working?

回答1:

Here is how to do that:

Just import the particles.js in your index.html (cdn or local)

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Put in the div anchor into your component template (you could also put it to index.html or somewhere else)
```
<div id="particles-js"></div>
```
Make the package visible by adding a simple type definition (in your component or in the typings.d.ts)
```
declare var particlesJS: any;
```

Initialize it in ngOnInit (or somewhere else)

particlesJS.load('particles-js', 'particles.json', null);

I have made a little plunker example: http://plnkr.co/edit/GLRvYgNPJue4KqdMuAJB?p=preview

回答2:

Update 22/11/2019

I have ported an angular version of particles.js into a directive. Inside the div you want to cover with particles, add a canvas element with repulse-particles. This is a very trimmed version of the library, but there are still quite a few options.

See example in the repo or in the stackblitz demo below.

Edit to your likings :)

Repo & stackblitz editor

https://github.com/audrenbdb/angular-particlesjs

https://stackblitz.com/edit/angular-dt2cjg

回答3:

Just want to add a comment to the Ado Ren's solution ( I'm not able to comment on his solution because I have not enough reputation)

It works well on Angular 8 but with little changes

Change 28th row in particles.component.ts file :

From :  @ViewChild('particles') particlesCanvas: ElementRef;
To   :  @ViewChild('particles', {static: true}) particlesCanvas: ElementRef;

Without this little change the error is thrown in angular 8

ERROR in app/particles/particles.component.ts(28,4): error TS2554: Expected 2 arguments, but got 1.

Also, you should change the background color of particles component from the white to something else. Otherwise, you won't see them as they are white too.

回答4:

Using the original package, without the https://github.com/audrenbdb/angular-particlesjs you can go as follows:

Install it using npm i particles.js

app.component.html

<div id="particles-js"></div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { ParticlesConfig } from './particles-config';

declare let particlesJS: any; // Required to be properly interpreted by TypeScript.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public ngOnInit(): void {
    this.invokeParticles();
  }

  public invokeParticles(): void {
    particlesJS('particles-js', ParticlesConfig, function() {});
  }
}

particles-config.ts

    export const ParticlesConfig = {
      particles: {
        number: {
          value: 70,
          density: {
            enable: true,
            value_area: 1400
          }
        },
        color: {
          value: '#283593'
        },
        shape: {
          type: 'polygon',
          stroke: {
            width: 1,
            color: '#283593'
          },
          polygon: {
            nb_sides: 6
          }
        },
        opacity: {
          value: 1,
          random: true,
          anim: {
            enable: true,
            speed: 0.8,
            opacity_min: 0.25,
            sync: true
          }
        },
        size: {
          value: 2,
          random: true,
          anim: {
            enable: true,
            speed: 10,
            size_min: 1.25,
            sync: true
          }
        },
        line_linked: {
          enable: true,
          distance: 150,
          color: '#283593',
          opacity: 1,
          width: 1
        },
        move: {
          enable: true,
          speed: 8,
          direction: 'none',
          random: true,
          straight: false,
          out_mode: 'out',
          bounce: true,
          attract: {
            enable: true,
            rotateX: 2000,
            rotateY: 2000
          }
        }
      },
      interactivity: {
        detect_on: 'canvas',
        events: {
          onhover: {
            enable: true,
            mode: 'grab'
          },
          onclick: {
            enable: true,
            mode: 'repulse'
          },
          resize: true
        },
        modes: {
          grab: {
            distance: 200,
            line_linked: {
              opacity: 3
            }
          },
          repulse: {
            distance: 250,
            duration: 2
          }
        }
      },
      retina_detect: true
   };

app.component.scss (optional, to show it as full height)

#particles-js {
  height: 100vh;
}

angular.json

"scripts": ["node_modules/particles.js/particles.js"]

来源：https://stackoverflow.com/questions/44293797/how-to-import-and-use-particles-js-in-an-angular-angular2-angular4-app

标签

javascript

angular

particles.js