Angular6使用粒子特效插件particlejs

1.安装angular-particle

npm install angular-particle --save

2.使用该组件的module.ts中导入模块

3.对应的html中

<particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"></particles>

4.对应的component.ts中定义如下

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myStyle: object = {};
  myParams: object = {};
  width: number = 100;
  height: number = 100;


  ngOnInit() {
    this.myStyle = {
      'position': 'fixed',
      'width': '100%',
      'height': '100%',
      'z-index': -1,
      'top': 0,
      'left': 0,
      'right': 0,
      'bottom': 0,
      'background-color': '#ccc'
    };

    this.myParams = {
      particles: {
        number: {
          value: 80,
        },
        color: {
          value: '#fff'
        },
        shape: {
          type: 'triangle',
        },
        move:{
          attract:{
            enable:true
          }
        }
      }
    };
}

效果图：