Angular等待用户响应函数问题：subscribe使用困惑

你的代码核心问题是异步逻辑处理顺序错误：

• subscribe是异步回调，用户点击对话框的操作不会阻塞代码执行
• 函数执行到return answer时，用户还没做出选择，所以返回的始终是初始值false
• 虽然函数加了async，但没有返回Promise，await根本起不到等待效果

把对话框返回的Observable转换成Promise，这样就能用async/await正常等待用户响应。RxJS 7及以上版本推荐用firstValueFrom或lastValueFrom（取代旧的toPromise）。

修改后的函数实现 #

import { firstValueFrom } from 'rxjs';

async showConfirmDialog(title: string, message: string): Promise<boolean> {
  const dialogObservable = this.dialog.confirmDialog({
    title: title,
    message: message,
    confirmCaption: 'Yes',
    cancelCaption: 'No'
  });

  // 等待Observable发出第一个值（用户的选择），并转换成Promise
  const answer = await firstValueFrom(dialogObservable);
  console.log('selected answer ' + answer);
  return answer;
}

调用方式（和你原写法一致即可） #

const theAnswer: boolean = await this.showConfirmDialog("Confirm Changes!", "Are you sure you want to cancel your changes?");

• firstValueFrom会等待Observable发出第一个值后完成，刚好匹配对话框只返回一次用户选择的场景
• 如果你的RxJS版本低于7，可以临时用dialogObservable.toPromise()，但这个方法已被废弃，建议升级RxJS版本

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