Как импортировать и использовать частицу.js в приложении Angular/Angular2/Angular4

У меня есть приложение Angular, в котором я хочу использовать частицу.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');
  });

Кто-нибудь получил это работает?

Источник

5 ответов

Решение

Вот как это сделать:

  1. Просто импортируйте частиц.js в ваш index.html (cdn или local)

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

  2. Вставьте якорь div в шаблон вашего компонента (вы также можете поместить его в index.html или где-то еще)

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

  3. Сделайте пакет видимым, добавив простое определение типа (в вашем компоненте или в typings.d.ts)

    declare var particlesJS: any;

  4. Инициализируйте его в ngOnInit (или где-то еще)

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

Я сделал небольшой пример плунжера: http://plnkr.co/edit/GLRvYgNPJue4KqdMuAJB?p=preview

Источник

Используя оригинальный пакет, без 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() {});
  }
}

частицы-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"]
Источник

Привет, я портировал угловую версию 6+ частиц. Js как отдельный компонент. Все, что вам нужно сделать, это добавить

<app-particles></app-particles>

внутри div вы хотите покрыть частицами.

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

И демоверсия: https://angular-d7nfwj.stackblitz.io/

Отредактируйте по своему вкусу:)

Источник

Просто хочу добавить комментарий к решению Ado Ren (я не могу прокомментировать его решение, потому что у меня недостаточно репутации)

Хорошо работает на Angular 8, но с небольшими изменениями

Измените 28-ую строку в файле частиц.component.ts:

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.

Кроме того, вы должны изменить цвет фона компонента частиц с белого на что-то другое. Иначе вы их не увидите, так как они тоже белые.

Источник

Я получаю сообщение об ошибке: Uncaught TypeError: свойства «вызывающий», «вызываемый» и «аргументы» могут быть недоступны для функций строгого режима или объектов аргументов для их вызовов.

Решение. Перейдите в файл 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;
    };
Источник
Другие вопросы по тегам