Angular中使用BehaviorSubject时finalize未触发，加载动画无法关闭

你的问题出在两个核心点上，直接导致finalize不触发、加载动画一直显示：

错误原因 #

1. switchMap未返回服务Observable：你在switchMap里只调用了服务方法，但没有return它返回的Observable，导致整个数据流被截断，后续的finalize操作根本接不到通知。
2. finalize的执行时机错误：你把finalize放在了user$的数据流上，但user$是BehaviorSubject，只要不主动调用complete()，这个流就永远不会结束，finalize自然不会执行。

修正方案 #

把finalize移到每个服务请求的数据流内部，同时确保switchMap返回服务的Observable，还要处理请求错误的情况（避免出错时加载动画一直转）。

修正后的组件代码

public ngOnInit(): void {
  // 处理用户课程
  this.getUserId().pipe(
    tap(() => this.spinner.userCourses = true),
    switchMap(userId => 
      // 把finalize放在服务请求的流里，请求完成/失败都会触发
      this.courseService.getUserCourse(userId).pipe(
        finalize(() => this.spinner.userCourses = false)
      )
    )
  ).subscribe({
    // 额外处理错误场景，确保加载状态关闭
    error: () => this.spinner.userCourses = false
  });

  // 处理用户地址
  this.getUserId().pipe(
    tap(() => this.spinner.userAddress = true),
    switchMap(userId => 
      this.addressService.getUserAddress(userId).pipe(
        finalize(() => this.spinner.userAddress = false)
      )
    )
  ).subscribe({
    error: () => this.spinner.userAddress = false
  });

  // 处理用户收藏歌曲
  this.getUserId().pipe(
    tap(() => this.spinner.userSongs = true),
    switchMap(userId => 
      this.songService.getUserFavoriteSongs(userId).pipe(
        finalize(() => this.spinner.userSongs = false)
      )
    )
  ).subscribe({
    error: () => this.spinner.userSongs = false
  });
}

代码优化（可选） #

如果不想重复写相同逻辑，可以抽成通用方法：

private setupUserLoader<T>(
  spinnerField: keyof typeof this.spinner,
  fetchData: (userId: number) => Observable<T>
): void {
  this.getUserId().pipe(
    tap(() => this.spinner[spinnerField] = true),
    switchMap(userId => fetchData(userId).pipe(
      finalize(() => this.spinner[spinnerField] = false)
    ))
  ).subscribe({
    error: () => this.spinner[spinnerField] = false
  });
}

public ngOnInit(): void {
  this.setupUserLoader('userCourses', userId => this.courseService.getUserCourse(userId));
  this.setupUserLoader('userAddress', userId => this.addressService.getUserAddress(userId));
  this.setupUserLoader('userSongs', userId => this.songService.getUserFavoriteSongs(userId));
}

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