PrimeNG ConfirmService链式处理：弹窗需等待用户确认后再展示

你遇到的问题很典型——用forEach同步循环调用弹窗时，所有弹窗会被瞬间触发，而PrimeNG的ConfirmDialog是单例模式，后面的弹窗会直接覆盖前面的，所以最终只看到最后一条消息。要实现用户确认一个后再显示下一个，得用异步迭代的方式来控制顺序。

方案1：使用async/await结合Promise #

这种方式代码可读性高，逻辑清晰，适合处理顺序执行的异步操作：

// 定义一个异步函数来逐个处理消息
async showSequentialConfirmations(mensajes: any[]) {
  // 用for...of循环代替forEach，支持await
  for (const mensaje of mensajes) {
    // 用Promise包裹弹窗，等待用户确认后再继续
    await new Promise<void>((resolve) => {
      this.utility.openConfirmDialog(this._confirmationService, {
        message: `${mensaje.mensaje} ${mensaje.restoMensaje}`,
        header: 'Atención',
        showReject: false
      }).subscribe(() => {
        // 用户点击确认后，resolve Promise，继续下一次循环
        resolve();
      });
    });
  }
}

// 调用方式
this.showSequentialConfirmations(mensajes);

方案2：递归调用（适合不熟悉async/await的场景） #

通过递归函数，在每次用户确认后触发下一个弹窗：

// 递归函数，index表示当前处理的消息下标
showNextConfirmation(mensajes: any[], index: number = 0) {
  // 所有消息处理完毕，终止递归
  if (index >= mensajes.length) return;

  const currentMsg = mensajes[index];
  this.utility.openConfirmDialog(this._confirmationService, {
    message: `${currentMsg.mensaje} ${currentMsg.restoMensaje}`,
    header: 'Atención',
    showReject: false
  }).subscribe(() => {
    // 用户确认后，递归调用处理下一条消息
    this.showNextConfirmation(mensajes, index + 1);
  });
}

// 调用方式
this.showNextConfirmation(mensajes);

为什么原来的代码不行？ #

forEach是同步循环，它会在瞬间遍历完所有消息并调用openConfirmDialog。而PrimeNG的ConfirmService是基于单例弹窗实现的，每次调用都会替换当前的弹窗内容，所以前面的弹窗还没来得及显示就被后面的覆盖了，最终只留下最后一条消息的弹窗。

上面两种方案都是确保上一个弹窗的确认事件完成后，才触发下一个弹窗，完美解决了顺序显示的问题。

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