如何在Angular / Angular2 / Angular4应用程序中导入和使用particles.js [英] How to import and use particles.js in an Angular/Angular2/Angular4 app

问题描述

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

我添加了它到.angular-cli.json

 scripts：[
../ node_modules/particles。 js / particles.js
]，
  

我已将其导入我的组件

 从'particles.js'导入*作为particlesJS; 
  

并尝试使用

$ b <$ p初始化它$ p> particlesJS.load（'particles-js'，'assets / particles.json'，function（）{
console.log（'callback - particles.js config loaded'）;
}）;


有人有这个吗？

解决方案

以下是如何做到这一点：

1. 只需导入你的particle.js index.html（cdn或local）

    < script src =https://cdn.jsdelivr.net/particles。 JS / 2.0.0 / particles.min.js>< /脚本> 
     




2. 将div锚放入组件模板（您也可以将其放入索引。 html或其他地方）

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




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

    声明var particlesJS：any; 
     




4. 在ngOnInit（或其他地方）初始化

     particlesJS.load（'particles-js'，'particles.json'，null）; 
     

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

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?

解决方案

Here is how to do that:

1. 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>
   

2. 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>
   

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

   declare var particlesJS: any;
   

4. 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

这篇关于如何在Angular / Angular2 / Angular4应用程序中导入和使用particles.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！