如何在Angular独立应用中使用ngx-spinner？

步骤1：安装必要依赖 #

确保已安装ngx-spinner和Angular动画模块（未安装则执行以下命令）：

npm install ngx-spinner @angular/animations

步骤2：在独立组件中导入所需模块 #

ngx-spinner是基于NgModule封装的工具，因此需要在独立组件的imports数组中导入它的模块，同时还要导入动画模块（否则加载器动画无法正常工作）：

import { Component } from '@angular/core';
import { NgxSpinnerModule, NgxSpinnerService } from 'ngx-spinner';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-your-component',
  standalone: true,
  imports: [
    NgxSpinnerModule,
    BrowserAnimationsModule // 若不需要动画，可替换为NoopAnimationsModule
  ],
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(private spinnerService: NgxSpinnerService) {}

  toggleSpinner() {
    this.spinnerService.show();
    // 模拟异步操作完成后隐藏加载器
    setTimeout(() => {
      this.spinnerService.hide();
    }, 2000);
  }
}

步骤3：在模板中使用ngx-spinner #

在组件模板中添加<ngx-spinner>标签，可自定义背景色、尺寸、加载动画类型等参数：

<button (click)="toggleSpinner()">触发加载器</button>

<ngx-spinner 
  bdColor="rgba(0,0,0,0.7)" 
  size="large" 
  color="#42b983" 
  type="pulse"
>
  <span style="color: white;">正在加载...</span>
</ngx-spinner>

错误原因说明 #

• 直接导入NgxSpinnerComponent会报错：因为该组件是通过NgxSpinnerModule导出的，独立组件仅支持导入standalone组件/指令/管道或NgModule，必须导入完整模块才能识别组件。
• 仅在构造函数声明NgxSpinnerService无效：服务仅负责控制加载器的显示/隐藏，但模板中的<ngx-spinner>标签需要模块导入才能被Angular编译器识别，因此会出现“not a known element”错误。

内容的提问来源于stack exchange，提问作者Nelson Teixeira