角度项目的粒子 js 背景？

谁能解释如何为 Angular 6 项目添加粒子 js 背景？ 我遵循了以下链接的一些教程，但它对我不起作用。https://github.com/VincentGarreau/articles.js/ https://github.com/VincentGarreau/particles.js/

谢谢。

这就是我让它在我的 NG6 项目中工作的方法：

1. 从 npm 安装 keywords.js：npm i keywords.js --save或者确保已经安装。
2. Add 节点模块/粒子.js/粒子.js在 angular.json 的脚本部分
3. 在您的组件中添加：声明 var 粒子JS：任意；在@组件之前
4. Go to 粒子.js https://vincentgarreau.com/particles.js/并根据您的喜好修改粒子，然后下载 keywordsjs-config.json 文件
5. 将该文件存储在您的 asset/data 文件夹中，名称为 keywords.json
6. 在你的组件 html 模板中添加一个 id = "articles-js" 的 div

7. 在您的组件 ngOnInit 中添加以下代码：

   粒子JS.load（‘粒子-js’，‘资产/数据/粒子.json’，函数（）{ console.log('回调-articles.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>