web-dev-qa-db-ja.com

Angular / Angular2 / Angular4アプリでparticle.jsをインポートして使用する方法

私はAngularアプリに自分がParticles.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');
  });

誰かがこれを機能させましたか？

javascriptangularparticles.js
9
Steve Fitzsimons

これを行う方法は次のとおりです。

  1. あなたのindex.html（cdnまたはローカル）にparticles.jsをインポートするだけです

    <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

5
Ludwig

angular 6+バージョンのparticle.jsをスタンドアロンコンポーネントとして移植しました。追加する必要があるのは

<app-particles></app-particles>

パーティクルでカバーしたいdiv内。

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

そしてデモ： https://angular-d7nfwj.stackblitz.io

お好みに合わせて編集してください:)

1
Ado Ren