javascript - 如何在Angular / Angular2 / Angular4应用程序中导入和使用particles.js(How to import and use particles.js in an Angular/Angular2/Angular4 app)

Question

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.

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

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

(我已将其添加到.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?

(有人有这个工作吗？)

  ask by Steve Fitzsimons translate from so

Answer 1

Here is how to do that:

(这样做的方法如下：)

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

   (只需在您的index.html（cdn或本地）中将particles.js导入)

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

2. Put in the div anchor into your component template (you could also put it to index.html or somewhere else)

   (将div锚放入组件模板中（也可以将其放入index.html或其他地方）)

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

3. Make the package visible by adding a simple type definition (in your component or in the typings.d.ts)

   (通过添加简单的类型定义（在您的组件中或在typesings.d.ts中）使包可见)

    declare var particlesJS: any; 

4. Initialize it in ngOnInit (or somewhere else)

   (在ngOnInit（或其他地方）中初始化它)

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

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

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