Частица JS фон для углового проекта? - PullRequest
Новая
       8

Частица JS фон для углового проекта?

0 голосов
/ 03 сентября 2018

Может кто-нибудь объяснить, как добавить фон частицы JS для проекта Angular 6? Я следовал за некоторыми уроками как ниже ссылка. Но это не работало для меня. https://github.com/VincentGarreau/particles.js/

Спасибо.

1 Ответ

0 голосов
/ 23 сентября 2018

Вот как я заставил его работать в моем проекте NG6:

  1. Установить частиц.js из npm: нпм i частиц.js --save
  2. Добавьте node_modules / частицы.js / частицы.js в разделе сценариев в angular.json
  3. В вашем компоненте добавьте: объявите переменные varJJ: любые; перед @component
  4. Перейдите на component.js и измените частицы по своему вкусу, затем загрузите файл частицjs-config.json
  5. Сохраните этот файл в папке ваших активов / данных как частицы.json
  6. В html-шаблон вашего компонента добавьте div с id = "частицы-js"

  7. в вашем компоненте ngOnInit добавьте следующий код:

    частицыJS.load ('частиц-js', 'assets / data / частиц.json', function () { console.log ('обратный вызов - загружен config частиц.js'); });

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ: Добавлен код 

import { Component, OnInit } from '@angular/core';
import { ParticlesConfig } from './../../../../../assets/data/particles';

declare var particlesJS: any;

@Component({
  selector: 'app-heading',
  templateUrl: './heading.component.html',
  styleUrls: ['./heading.component.scss']
})
export class HeadingComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        // https://vincentgarreau.com/particles.js/
        particlesJS('particles-js', ParticlesConfig, function() {
            console.log('callback - particles.js config loaded');
          });
    }
}

шаблон 

<div class="h-75 bg header">
    <div  id="particles-js" class="w-100 header-particles"  >

    </div>
    <div class="header-container w-100">
        <div>
            <h1> Big Header</h1>
            <div>small header</div>
        </div>
    </div>
</div>

и использование в другом компоненте 

<app-heading></app-heading>
<main>
  <app-features></app-features>
  <app-pricing-tier></app-pricing-tier>
  <app-testimonials></app-testimonials>
  <app-trusted-by></app-trusted-by>
</main>
...