web-dev-qa-db-fra.com

Comment importer et utiliser particules.js dans une application Angular/Angular2/Angular4

J'ai une application Angular dans laquelle je veux utiliser particules.js, mais je ne sais pas comment l'ajouter et la faire fonctionner.

Je l'ai ajouté à la .angular-cli.json

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

Et je l'ai importé dans mon composant

import * as  particlesJS from 'particles.js';

Et essayé de l'initialiser en utilisant 

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

Quelqu'un a-t-il réussi?

javascriptangularparticles.js
5
Steve Fitzsimons

Voici comment faire cela:

  1. Importez simplement le particules.js dans votre index.html (cdn ou local)

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

  2. Placez l’ancre div dans votre modèle de composant (vous pouvez également le mettre dans index.html ou ailleurs)

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

  3. Rendre le package visible en ajoutant une définition de type simple (dans votre composant ou dans le fichier typings.d.ts)

    declare var particlesJS: any;

  4. Initialisez-le dans ngOnInit (ou ailleurs)

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

J'ai fait un petit exemple plunker: http://plnkr.co/edit/GLRvYgNPJue4KqdMuAJB?p=preview

5
Ludwig

Bonjour, j’ai porté une version 6+ angulaire de particle.js en tant que composant autonome. Tout ce que vous avez à faire est d'ajouter

<app-particles></app-particles>

à l'intérieur de la div que vous voulez couvrir avec des particules.

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

Et la démo: https://angular-d7nfwj.stackblitz.io

Modifier à votre goût :)

1
Ado Ren