如何在async管道中更新已有的Observable？

我有一个通过async管道订阅的Observable：

<ng-container *ngIf="invitations$ | async as invitations">

该Observable在ngOnInit中初始化：

this.invitations$ = this.getInvitations();

其中getInvitations是发起HTTP请求并返回Observable<Invitation[]>的私有方法：

private getInvitations(): Observable<Invitation[]> {
  return this.invitationService.getInvitations();
}

现在我想在点击模板按钮发送提醒后，待postReminderEmail请求成功后更新邀请列表，当前sendReminder方法如下：

sendReminder() {
  this.invitationService.postReminderEmail()
    .subscribe();
}

我知道可以通过this.invitations$ = this.getInvitations();更新，且async管道会自动处理新旧订阅切换，无内存泄漏问题，但不确定该代码的放置位置，目前考虑了三种方案：

1. 放在pipe的mergeMap中：

sendReminder() {
  this.invitationService.postReminderEmail().pipe(
    mergeMap(() => this.invitations$ = this.getInvitations())
  ).subscribe();
}

但这是同步操作，mergeMap未返回有效内容，似乎不合理；换成tap也存疑。
2. 放在subscribe回调中，又担心引发间接嵌套订阅。
3. 使用Subject触发更新：

this.invitationsSubject.pipe(
  mergeMap(() => this.getInvitations()),
  takeUntil(this.destroyed)
).subscribe();

this.invitations$ = this.invitationsSubject.asObservable();

通过this.invitationsSubject.next([])触发，但该方案冗余且需传递空值，也不理想。

请问哪种才是正确的实现方式？

方案1：直接在subscribe回调中重新赋值（最简洁） #

你担心的“嵌套订阅”在这里不存在——我们只是在订阅回调里同步执行了重新赋值操作，没有创建并保留新的订阅引用，这种方式安全且直观：

sendReminder() {
  this.invitationService.postReminderEmail().subscribe({
    next: () => {
      this.invitations$ = this.getInvitations();
    },
    error: (err) => {
      // 处理错误，比如提示用户发送失败
      console.error('发送提醒失败:', err);
    }
  });
}

• 优势：代码简洁无额外复杂度，async管道会自动取消旧Observable的订阅并订阅新的，完全不用担心内存泄漏。
• 注意：必须处理错误回调，避免请求失败时无反馈且控制台报错。

方案2：用tap操作符实现（语义更贴合RxJS风格） #

如果偏好RxJS链式调用的写法，可以用tap操作符在流的副作用中执行列表更新，tap的作用就是执行不修改流本身的副作用操作，在这里完全适用：

sendReminder() {
  this.invitationService.postReminderEmail().pipe(
    tap(() => {
      this.invitations$ = this.getInvitations();
    })
  ).subscribe({
    error: (err) => console.error('发送提醒失败:', err)
  });
}

这种写法和方案1本质逻辑一致，只是把更新操作放到了管道的副作用步骤中，语义更清晰。

为什么不推荐另外两种方案？ #

• mergeMap方案：mergeMap的核心作用是将当前流的值映射为新Observable并合并到主流，但你这里直接赋值this.invitations$并返回新Observable，完全没有利用到mergeMap的流合并能力，属于误用，写法冗余且语义混淆。
• Subject触发方案：这是RxJS事件驱动更新的标准模式，但对你的场景来说过于复杂——你只需要在单次HTTP请求成功后触发一次列表刷新，引入Subject反而增加了代码冗余和维护成本。只有当需要从多个不同场景触发列表刷新时，这种方案才会体现价值。

额外优化：避免重复请求（可选） #

如果担心短时间内多次点击按钮导致重复请求，可以添加请求锁：

private isReminding = false;

sendReminder() {
  if (this.isReminding) return;
  this.isReminding = true;
  
  this.invitationService.postReminderEmail().subscribe({
    next: () => {
      this.invitations$ = this.getInvitations();
    },
    error: (err) => console.error('发送提醒失败:', err),
    complete: () => {
      this.isReminding = false;
    }
  });
}

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