Angular组件切换Tab时Promise未返回最新响应，是否需升级RxJS7？

我有一个带标签页的页面，点击特定标签页时会创建对应组件，触发ngOnInit生命周期；离开标签页时组件销毁，触发ngOnDestroy。

在ngOnInit中调用了初始化字段的函数，首次请求结果正常，但再次进入同一标签页时，变量pageModelResponse返回旧值，可浏览器实际接收的是新请求的响应。项目由多团队共享，想确认是否必须升级到RxJS 7、用lastValueFrom才能解决这个问题。

相关代码：

ComponentBase.ts #

public async initializeDefaults(): Promise<void> {
            const pageModelResponse = await this.alertService.getPageModel(this.masterFeatureId).toPromise();
            this.pageModel = pageModelResponse?.data as AlertProfilePageModel;
            this.selectedSortOption = this.pageModel?.sortOptions?.find((x: SortOption) => x.isSelected) ?? {} as SortOption;
            this.getCurrentUrlParams();
}

Component.ts #

public async ngOnInit(): Promise<void> {
    await this.initializeDefaults();
}

核心结论：不需要升级到RxJS 7 #

这个问题并非必须通过升级RxJS、使用lastValueFrom解决，先排查以下关键点：

1. 检查服务层的缓存逻辑
   浏览器能拿到新响应，但组件收到旧值，大概率是alertService.getPageModel内部做了缓存处理（比如用了shareReplay、cache等操作符）。如果服务层为了性能做了全局缓存，会导致所有订阅都复用旧值。

   • 解决方式：要么调整服务逻辑，移除不必要的缓存；要么在组件调用时添加pipe(skip(1))或强制创建新的Observable实例，确保每次进入标签页都发起新请求并获取最新响应。

2. 调整组件的订阅方式（替代toPromise）
   toPromise()在RxJS 6中本身没有问题，但如果组件销毁时存在未清理的订阅残留，可能导致旧值被保留。可以改用手动订阅并在销毁时取消：

   • 修改ComponentBase.ts：

     import { Subscription } from 'rxjs';
     
     private pageModelSub?: Subscription;
     
     public initializeDefaults(): void {
       this.pageModelSub = this.alertService.getPageModel(this.masterFeatureId)
         .subscribe({
           next: (res) => {
             this.pageModel = res?.data as AlertProfilePageModel;
             this.selectedSortOption = this.pageModel?.sortOptions?.find(x => x.isSelected) ?? {} as SortOption;
             this.getCurrentUrlParams();
           },
           error: (err) => {
             // 按需处理错误
           }
         });
     }
     
     public ngOnDestroy(): void {
       this.pageModelSub?.unsubscribe();
     }
     

   • 这样每次组件初始化都会重新订阅，获取最新的请求响应，同时避免内存泄漏。

3. 若坚持使用Promise风格（RxJS 6兼容）
   不需要升级RxJS 7，也可以手动确保取到最新值：

   import { last } from 'rxjs/operators';
   
   public async initializeDefaults(): Promise<void> {
     const pageModelResponse = await this.alertService.getPageModel(this.masterFeatureId)
       .pipe(last()) // 确保取最后一个值（HTTP请求只会发一次，这里等价于toPromise）
       .toPromise();
     // 后续逻辑不变
   }
   

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