Angular 16中HttpInterceptor实现的加载Spinner不显示问题排查

核心问题1：HttpInterceptor未注册到Angular依赖注入系统 #

Angular的HttpInterceptor不会自动生效，必须在模块的providers数组中通过HTTP_INTERCEPTORS令牌注册。你当前的代码缺少这一步，导致Interceptor根本没有被触发，SpinnerService的show/hide方法从未执行。

核心问题2：模板中*ngIf的判断逻辑有误 #

当前模板中的*ngIf="spinnerService.spinnerCounter$ | async"只会判断Observable是否有值，但spinnerCounter$初始值是0，当请求发起时变为1，结束后回到0。正确的判断应该是当计数器值大于0时显示Spinner，因为0代表没有活跃请求。

额外优化：组件中封装Observable（可选但更规范） #

虽然直接在模板中使用spinnerService的属性可行，但更符合Angular最佳实践的方式是在组件类中定义一个属性来代理这个Observable，避免模板直接依赖服务实例。

具体修复步骤 #

1. 在AppModule中注册HttpInterceptor #

打开app.module.ts，添加以下配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from './services/interceptor.service';

import { AppComponent } from './app.component';
import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';

@NgModule({
  declarations: [
    AppComponent,
    LoadingSpinnerComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修正AppComponent的模板判断逻辑 #

修改app.component.html中的代码：

<app-loading-spinner *ngIf="(spinnerCounter$ | async) > 0"></app-loading-spinner>

3. （可选）在AppComponent中封装Observable #

打开app.component.ts，调整代码：

import { Component } from '@angular/core';
import { SpinnerService } from './services/spinner.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  spinnerCounter$: Observable<number>;

  constructor(private spinnerService: SpinnerService) {
    this.spinnerCounter$ = this.spinnerService.spinnerCounter$;
  }
}

4. 验证LoadingSpinner组件的可见性 #

确保app-loading-spinner组件本身有可见的样式，避免因为样式问题导致看起来没显示。例如：

/* loading-spinner.component.css */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

完成以上步骤后，当你发起HTTP请求时，Interceptor会触发SpinnerService的show()方法，计数器变为1，Spinner组件会显示；请求完成（成功或失败）后，finalize操作符会触发hide()方法，计数器回到0，Spinner组件隐藏。

内容的提问来源于stack exchange，提问作者Razvan Zamfir