粒子.js没有粒子以角度加载

Question

我已经将粒子.js添加到了Angular 4项目中，如下所示

正在加载 Json 文件，但我在屏幕上看不到粒子

在 .ts 组件中：

import { Component, Output, ViewEncapsulation, OnInit } from '@angular/core';
import { MnFullpageOptions, MnFullpageService } from 'ngx-fullpage';

declare var particlesJS: any;
@Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
@Output() public options: MnFullpageOptions = new MnFullpageOptions({
autoScrolling: true,
controlArrows: false,
});
ngOnInit() {

particlesJS.load('particles-js', 'assets/particlesjs-config.json', console.log('callback - particles.js config loaded'));

}
constructor() { }
}

网页文件 ：

<div id="particles-js" style="border:2px solid black; background-color:red">
<div class="menu-wrapper">
</div>
<div id="content-wrapper" [mnFullpage]="options" [mnFullpageNavigation]="true" [mnFullpageKeyboardScrolling]="true" [mnFullpageSlidesNavigation]="true" mnFullpageSlidesNavPosition="bottom">
<div class="section welcome-section fp-section fp-table ">
<div class="fp-tableCell ">
<div id="presentation" class="example-card" fxLayout="row">
<app-slide-presentation>
</app-slide-presentation>
</div>
</div>
</div>
<div class="section welcome-section fp-section fp-table">
<div class="fp-tableCell">
<div id="formation" class="example-card" fxLayout="row" fxLayoutAlign="center center">
<app-formation>
</app-formation>
</div>
</div>
</div>
<div class="section welcome-section fp-section fp-table">
<div fxLayout="row" class="fp-tableCell " style="height:100%; width:60%; overflow:hidden; margin:auto ; background-color:white ">
<div class="slide" >
<app-competences1>
</app-competences1>
<div class="slide" style="background-color:white">
>
</div>
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</div>
</div>
</div>
</div>
</div>

在控制台中，我收到回调消息：

callback - particles.js config loaded

我启动了一个新项目，一切都在工作：

在 TS 组件文件中：

import { Component, Input, Output, OnInit, ViewEncapsulation } from '@angular/core';
declare var particlesJS: any;
@Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
ngOnInit() {
particlesJS.load('particles-js', 'assets/particlesjs-config.json', null);
}
}

在 HTML 中：

<div id="particles-js"></div>

颗粒正在完美加载。

我看不出 2 个示例之间的区别。

Answer 1

将"背景颜色"添加到"粒子-js"容器对我有用。

@home.组件.html：

<div id="particles-js"></div>

@home.component.scss：

#particles-js {
height: 100vh;
background-color: black;
}