ngx-旋转图标没有显示角13

Question

旋转器出现在页面加载，但是加载文本显示，但图标没有显示。我已经跟踪了文档，但似乎找不到问题。这是我在页面上看到的截图。

​

package.json

"ngx-spinner": "^13.1.1",

angular.json

    "styles": [
      "node_modules/ngx-spinner/animations/ball-scale-multiple.css",
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/css/reset.css",
      "src/css/styles.scss"
    ],

app.module.ts

   import { NgxSpinnerModule } from "ngx-spinner";
     import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
          
   imports: [
      NgxSpinnerModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

app.component.html

<ngx-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple"
>
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

app.component.ts

 import { NgxSpinnerService } from 'ngx-spinner';

 constructor(private spinner: NgxSpinnerService){}

  ngOnInit(): void {

    /** spinner starts on init */
    this.spinner.show();

    setTimeout(() => {
      /** spinner ends after 5 seconds */
      this.spinner.hide();
    }, 5000);

  }

Answer 1

app.componet.html

将fullScreen = "true"添加到ngx-旋转器标记中

<ngx-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple"
  [fullScreen] = "true"
>
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

Answer 2

对于BrowserAnimationsModule.中的ngx-spinner，还需要在app.module.ts中添加导入数组。

从…

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Answer 3

我也有过同样的问题。您必须在添加type=“球比例尺-倍数”后重新编译项目(ng serve)。

然后你就可以正确地显示

这也要记住

​

​