Question

我有一个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');
  });

有人有这个工作吗？

Answer 1

以下是如何做到这一点：

只需在index.html（cdn或local）中导入particles.js

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

将div锚放入组件模板（您也可以将它放到index.html或其他地方）
```
<div id="particles-js"></div>
```
通过添加简单的类型定义（在组件中或typings.d.ts中）使包可见
```
declare var particlesJS: any;
```

在ngOnInit（或其他地方）

中初始化它

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

我做了一个小小的例子： http://plnkr.co/edit/GLRvYgNPJue4KqdMuAJB?p=preview

Answer 2

嘿，我移植了一个6角版本的particles.js作为独立组件。您要做的就是添加

NB

您要用粒子覆盖的div内。

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

演示：https://angular-d7nfwj.stackblitz.io

根据自己的喜好进行编辑：）

Answer 3

使用原始软件包，而不使用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() {});
  }
}

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 （可选，以完整高度显示）

#particles-js {
  height: 100vh;
}

angular.json

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

Answer 4

只想在Ado Ren的解决方案中添加评论（由于信誉不佳，我无法评论他的解决方案）

它在Angular 8上运行良好，但变化不大

更改particle.component.ts文件中的第28行：

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

没有这个小变化，错误就以角度8引发

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

此外，您还应该将粒子组件的背景颜色从白色更改为其他颜色。否则，您也不会看到它们，因为它们也是白色的。

Answer 5

我收到错误：

<块引用>

未捕获的类型错误：“调用者”、“被调用者”和“参数”属性可能无法在严格模式函数或调用它们的参数对象上访问。

解决方案：转到particle.js文件并修改它：


    -//Object.deepExtend = function (destination, source) {
    +Object.deepExtend = function deepExtendFunction(destination, source) {
      for (var property in source) {
        if (source[property] && source[property].constructor &&
         source[property].constructor === Object) {
          destination[property] = destination[property] || {}; 
    -       //arguments.callee(destination[property], source[property]);
    +      deepExtendFunction(destination[property], source[property]);
        } else {
          destination[property] = source[property];
        }
      }
      return destination;
    };

如何在Angular / Angular2 / Angular4应用程序中导入和使用particles.js

5 个答案:

更改particle.component.ts文件中的第28行：