如何在Observable完成时隐藏Spinner组件？Angular实现疑问

兄弟，我完全懂你卡在哪了——核心问题是你没搞清楚Observable的惰性执行和冷热特性！先拆解你的问题，再给你一步步的解决方案：

为什么你的代码不符合预期？ #

你遇到的两个矛盾点本质是同一个原因：

1. 不调用subscribe()：Observable是惰性的，只有订阅后才会触发整个管道的执行，所以你写的pipe(map(() => console.log('component')))根本不会跑。
2. 调用subscribe()：你的test是个冷Observable，每次订阅都会从头执行整个流（包括tap1和HTTP请求），等于父组件点按钮订阅一次，子组件又订阅一次，重复执行了两次，自然不符合预期。

正确的解决方案 #

第一步：把冷Observable转成共享的热Observable #

先在父组件里，给你的Observable加上share()操作符，让多个订阅者共享同一次执行结果，避免重复发起请求或执行副作用：

export class AppComponent { 
  name = 'Angular 6'; 
  test: Observable<any>; 

  constructor(private http: HttpClient) { 
    const obs = of(true); 
    this.test = obs.pipe(
      tap(() => console.log('tap1')),
      flatMap(() => this.http.get('https://httpbin.org/get')),
      share() // 关键：让多订阅共享同一次执行
    ); 
  } 

  demo() { 
    this.test.subscribe((state: any) => console.log(state)); 
  } 
}

第二步：子组件正确监听Observable状态并管理订阅 #

子组件需要在Observable变化时订阅，同时处理订阅清理（避免内存泄漏），并在合适时机控制Spinner：

import { Component, Input, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';

export class HelloComponent implements OnChanges, OnDestroy { 
  @Input() name: string; 
  @Input() obs: Observable<any>; 
  private subscription: Subscription | null = null;

  ngOnChanges(changes: SimpleChanges): void { 
    if (changes.obs) {
      // 先清理之前的旧订阅，防止内存泄漏
      this.subscription?.unsubscribe();
      // 👉 Observable开始执行：显示Spinner
      console.log('显示Spinner');
      
      this.subscription = this.obs.pipe(
        tap(() => console.log('component'))
      ).subscribe({
        next: (res) => {
          // 处理返回结果（如果需要）
        },
        complete: () => {
          // 👉 Observable执行完成：隐藏Spinner
          console.log('隐藏Spinner');
        },
        error: () => {
          // 👉 执行出错也要隐藏Spinner，避免卡死
          console.log('隐藏Spinner');
        }
      });
    }
  }

  ngOnDestroy(): void {
    // 组件销毁时务必清理订阅
    this.subscription?.unsubscribe();
  }
}

更优雅的响应式写法（推荐） #

如果不想手动管理订阅，可以用Angular的AsyncPipe结合状态流，更符合响应式编程风格：

1. 父组件创建包含加载状态的Observable：

this.testState$ = obs.pipe(
  tap(() => console.log('tap1')),
  flatMap(() => this.http.get('https://httpbin.org/get')),
  map(data => ({ loading: false, data })),
  startWith({ loading: true, data: null }), // 初始加载状态
  catchError(err => of({ loading: false, data: null, error: err })),
  shareReplay(1) // 保留最新状态给后续订阅
);

2. 子组件直接用AsyncPipe订阅，根据状态显示Spinner：

<div *ngIf="testState$ | async as state">
  <span *ngIf="state.loading">🔄 加载中...</span>
  <div *ngIf="!state.loading">
    {{ state.data | json }}
  </div>
</div>

最终控制台输出（符合你的期望） #

点击demo按钮后，控制台会按顺序输出：

• tap1
• HTTP请求返回的结果
• component
• 隐藏Spinner

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