Angular中如何先获取forkJoin数据再订阅Subject？

核心问题在于普通Subject是热Observable，当你跳转到anotherComponent时，可能已经在oneComponent中发送了数据，而anotherComponent里的forkJoin请求还在进行，导致Subject数据先被接收，HTTP请求后完成。以下是两种可靠的解决方式：

方式一：用ReplaySubject保留历史数据（推荐） #

普通Subject不会保留已发送的数据，晚订阅就拿不到之前的内容。换成ReplaySubject(1)可以保留最后一条发送的数据，确保后续订阅也能获取到：

1. 修改共享服务的Subject类型

// shared.service.ts
import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SharedService {
  private dataSubject = new ReplaySubject<any>(1); // 保留最后1条数据
  data$ = this.dataSubject.asObservable();

  sendData(data: any) {
    this.dataSubject.next(data);
  }
}

2. 在anotherComponent中确保forkJoin先执行
   通过switchMap操作符，等forkJoin完成后再订阅Subject的数据流：

// another.component.ts
import { forkJoin } from 'rxjs';
import { switchMap } from 'rxjs/operators';

ngOnInit() {
  forkJoin([
    this.httpClient.get('/api/first-data'),
    this.httpClient.get('/api/second-data')
  ]).pipe(
    switchMap(([res1, res2]) => {
      // 先处理两个HTTP请求的结果
      this.firstData = res1;
      this.secondData = res2;
      // 此时再订阅Subject的数据
      return this.sharedService.data$;
    })
  ).subscribe(subjectData => {
    // 这里已经拿到了HTTP请求数据，再处理Subject传递的内容
    this.handleCombinedData(subjectData);
  });
}

方式二：缓存Subject数据，等HTTP请求完成后再处理 #

如果不想修改Subject类型，可以先把Subject的数据缓存起来，等forkJoin完成后再使用：

// another.component.ts
private cachedSubjectData: any;

ngOnInit() {
  // 先订阅Subject，缓存数据
  this.sharedService.data$.subscribe(data => {
    this.cachedSubjectData = data;
  });

  // 执行HTTP请求
  forkJoin([
    this.httpClient.get('/api/first-data'),
    this.httpClient.get('/api/second-data')
  ]).subscribe(([res1, res2]) => {
    this.firstData = res1;
    this.secondData = res2;
    // HTTP请求完成后，处理缓存的Subject数据
    if (this.cachedSubjectData) {
      this.handleCombinedData(this.cachedSubjectData);
    }
  });
}

注意：这种方式存在风险，如果Subject的数据在HTTP请求完成后才发送，缓存就会为空，所以更推荐第一种方式。

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