8

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

谢谢你。

4

3 回答 3

11

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

  1. 从 npm 安装particles.js： npm iparticle.js --save或确保已安装。
  2. 在 angular.json 的脚本部分添加node_modules/particles.js/particles.js
  3. 在您的组件中添加：声明 varparticleJS: any; 在@component 之前
  4. 转到particles.js并根据自己的喜好修改粒子，然后下载particlejs-config.json 文件
  5. 将该文件作为particles.json 存储在您的资产/数据文件夹中
  6. 在您的组件 html 模板中添加一个 id = "particles-js" 的 div

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

    particlesJS.load('particles-js', 'assets/data/particles.json', function() { console.log('callback -particles.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>
于 2018-09-22T23:52:36.597 回答
3

我想在Alberto的回答中添加更多内容。我在 Angular CLI 8.3.2 版上，一切正常。正如问题所问，我实际上想将它添加到我的组件的背景中。我使用这样的 CSS 实现了这一点。

HTML

<div id="container">
  <div id="particles-js">
  </div>
  <div id="over">
      <!--Existing markup-->
  </div>
</div>

CSS

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#particles-js,
#over {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#over {
  z-index: 10;
}

此设置将在您现有的标记下应用particles.js 背景。

编辑：

如果您使用 Windows 上的 Azure 应用服务 (IIS) 将其部署到生产环境，您可能会收到 404 not found 错误particles.json。在这种情况下，在文件夹中创建web.config如下src文件，并将其包含在assets数组中angular.json

网络配置

<configuration>
  <system.webServer>
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Angular" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

角.json

"assets": [
     "projects/dashboard/src/favicon.ico",
     "projects/dashboard/src/assets",
     "projects/dashboard/src/web.config"
]
于 2019-12-25T19:57:17.830 回答
1

您可以使用“angular-particle”轻松实现粒子动画，它是带有 TypeScript for Angular 的particle.js 实现

它的实现非常简单，您可以在下面的链接中找到它 https://www.npmjs.com/package/angular-particle

编辑：

这是 angular 8 中 angular-particle 的运行示例 https://github.com/SunnyMakode/angular-particle-demo

从 github 拉取代码后，

  1. 输入“npm install --save”并从终端窗口回车
  2. 输入“ng serve”并回车
于 2020-02-27T08:42:44.690 回答