combineLatest行为异常：调用next后未更新最新值

需求：

• 组件加载时（构造函数中）初始化加载数据
• 在组件其他位置动态控制数据刷新

尝试用BehaviorSubject结合combineLatest实现，期望调用BehaviorSubject的.next()就能触发数据刷新，但点击触发时，combineLatest始终返回第一次的旧值，无法获取新数据。

已尝试的代码 #

obs$ = this.service.getRandomNumber(1000);
fetchRandom$ = new BehaviorSubject<void>(void 0);
randomNumber = 0;
randomNumberGenerated = signal<boolean>(false);

constructor(private service: MyService) {
  combineLatest([this.obs$, this.fetchRandom$])
    .pipe(
      takeUntilDestroyed(),
      map(([randomNumber]) => randomNumber)
    )
    .subscribe((randomNumber) => {
      console.log('random number', randomNumber);
      this.randomNumber = randomNumber;
      this.randomNumberGenerated.set(true);
    });
}

onClick() {
  this.fetchRandom$.next();
}

问题原因 #

obs$是一次性Observable，第一次订阅后就会完成并发射最终值，后续combineLatest只会复用这个已完成Observable的最后值，不会重新调用服务获取新数据。

解决方案 #

将服务调用放在switchMap操作符中，以fetchRandom$为触发源，每次fetchRandom$发射新值时，都重新调用服务获取新数据：

fetchRandom$ = new BehaviorSubject<void>(void 0);
randomNumber = 0;
randomNumberGenerated = signal<boolean>(false);

constructor(private service: MyService) {
  this.fetchRandom$
    .pipe(
      takeUntilDestroyed(),
      // 每次fetchRandom$触发时，重新调用服务获取新数据
      switchMap(() => this.service.getRandomNumber(1000))
    )
    .subscribe((randomNumber) => {
      console.log('random number', randomNumber);
      this.randomNumber = randomNumber;
      this.randomNumberGenerated.set(true);
    });
}

onClick() {
  this.fetchRandom$.next();
}

关键说明 #

• switchMap会在源Observable（fetchRandom$）发射新值时，取消之前可能未完成的服务请求，并订阅新的Observable（服务返回的新请求），确保每次触发都能获取最新数据。
• 保留BehaviorSubject初始发射的void 0，保证组件初始化时自动触发第一次数据加载，满足需求1。

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