我有一个 Angular 应用程序，我想在其中使用 particles.js，但是我不知道如何添加它并让它工作。

我已经将它添加到 .angular-cli.json

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

我已经将它导入到我的组件中

import * as  particlesJS from 'particles.js';

并尝试使用

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

有人用过这个吗？

最佳答案

使用原始包，没有 https://github.com/audrenbdb/angular-particlesjs你可以按如下方式进行:

使用 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() {});
  }
}

粒子配置.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(可选，显示全高)

#particles-js {
  height: 100vh;
}

angular.json

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

关于javascript - 如何在 Angular/Angular2/Angular4 应用程序中导入和使用 particles.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44293797/