So importieren und verwenden Sie particles.js in einer Angular/Angular2/Angular4 App

Question

Ich habe eine Angular App, die ich particles.js verwenden möchte, aber ich habe keine Ahnung, wie ich es hinzufügen und es zum Laufen bringen kann.

Ich habe es auf die .angular-cli.json hinzugefügt

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

Und ich habe es in meiner Komponente importiert

import * as particlesJS from 'particles.js'; 

und versuchte, es zu initialisieren mit

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

Hat jemand das funktioniert?

Answer 1

Hier ist, wie das tun:

1. einfach die particles.js in Ihrer index.html importieren (CDN oder lokal)

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

2. im div Anker setzen in Ihrer Komponente Vorlage (Sie könnten setzen es auch index.html oder woanders)

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

3. Machen Sie den pa ket sichtbar durch eine einfache Typdefinition Hinzufügen (in der Komponente oder in der typings.d.ts)

   declare var particlesJS: any; 
   

4. es in ngOnInit initialisieren (oder woanders)

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

Ich habe ein kleines Beispiel: http://plnkr.co/edit/GLRvYgNPJue4KqdMuAJB?p=preview

Answer 2

Haben Sie versucht, von Ihrem Paketmanager in der Befehlszeile zu installieren?

Pakete installieren

npm

https://www.npmjs.com/package/particles.js

npm install particles.js 

Bower

bower install particles.js --save 

Detailliertere Anweisungen zum Gebrauch auf dieser Seite: Blättern Sie nach unten auf der Seite für Nutzung und https://github.com/VincentGarreau/particles.js/

installieren Wenn Sie die oben genannten haben, die Entsendung Fehlermeldungen, die Sie wäre hilfreich sehen.