NgxSpinner的hide()在subscribe complete回调中无法隐藏加载框

• 你当前的写法存在核心逻辑错误：RxJS 数据流规则明确，当流抛出错误进入error回调后会直接终止，不会触发complete回调。把spinner.hide()写在complete中，只要接口返回错误（鉴权失败、服务端异常、网络错误等），隐藏逻辑根本不会执行，完全达不到“任意响应后关闭加载框”的预期。
• 即使是请求成功触发了complete回调，加载框不隐藏通常是两个原因：
  • NgxSpinner 内部维护了显示计数器：每调用一次show()计数器+1，每调用一次hide()计数器-1，只有计数器归0时加载框才会真正关闭。如果项目中配置了全局HTTP拦截器、路由守卫自动触发spinner.show()，你手动重复调用show后，单次hide只会把计数器减1，无法归0自然不会关闭。
  • 同步调用hide()的时机早于Spinner组件完成show状态的渲染注册，Angular变更检测没有捕获到隐藏状态的变更，导致视图不更新。

• 优先使用 RxJS 官方提供的finalize操作符处理加载框关闭逻辑，该操作符会在数据流终止时（无论正常完成还是报错抛出）统一执行收尾逻辑，不需要在next、error、complete回调中重复写hide代码，是处理加载状态的标准写法。
  实现代码如下：

  import { finalize } from 'rxjs/operators';
  
  // 业务逻辑实现
  this.spinner.show();
  this.authService.login(this.formLogin.value)
    .pipe(
      finalize(() => {
        this.spinner.hide();
      })
    )
    .subscribe({
      next: (token) => {
        console.log(token);
        StorageUtil.login(token.token, token.refreshToken);
      },
      error: () => {
        this.showError();
      }
    });
  

• 如果上述写法仍然存在加载框不关闭的问题，按以下顺序排查：
  1. 排查重复调用show的问题：检查全局拦截器、路由守卫中的Spinner调用逻辑，避免重复触发show；排查时可以调用强制隐藏API忽略计数器验证问题：

     // 第二个参数传入配置，force为true时直接忽略计数器强制隐藏
     this.spinner.hide(undefined, { force: true });
     

  2. 排查变更检测时机问题：不要用setTimeout硬编码延迟，将hide逻辑包裹在Angular Zone中执行，主动触发视图更新：

     import { NgZone } from '@angular/core';
     
     // 构造函数注入NgZone
     constructor(private ngZone: NgZone) {}
     
     // finalize回调中修改为
     finalize(() => {
       this.ngZone.run(() => {
         this.spinner.hide();
       });
     })
     

注意：setTimeout延迟调用属于不可靠的hack方案，它通过宏任务强行把hide逻辑排到当前事件循环的所有同步、渲染任务之后，在不同性能的设备上表现不一致，还会导致加载框关闭时机不可控，生产环境不要使用。

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