点击确认按钮关闭Swal是否为预期行为？如何实现加载示例并保持弹窗打开？

1. 点击确认按钮关闭弹窗是否属于预期行为？ #

这不是预期行为！当你配置了[showLoaderOnConfirm]="true"时，从你的代码来看是Angular封装的ngx-sweetalert2，SweetAlert2的设计逻辑是：点击确认按钮后，弹窗会保持打开状态并显示加载动画，直到你的异步操作完成（或者你手动关闭弹窗）。如果点击确认后弹窗直接关闭，大概率是你的save()方法没有返回Promise，或者方法内没有正确处理异步流程，导致Swal无法识别需要等待操作完成。

2. 如何实现示例中的加载效果？ #

要让加载效果正常工作，核心是让你的save()方法返回一个Promise，这样Swal会自动等待Promise resolve/reject后再处理弹窗状态。举个简单的示例：

// 组件类中的save方法
save(): Promise<void> {
  // 模拟实际场景中的异步操作（比如API请求）
  return new Promise((resolve) => {
    setTimeout(() => {
      // 这里写你的实际保存逻辑
      console.log("修改已成功保存");
      resolve();
    }, 2000); // 模拟2秒的操作耗时
  });
}

另外要确保你使用的ngx-sweetalert2和底层的sweetalert2版本兼容，版本不匹配也可能导致showLoaderOnConfirm属性失效。

3. 如何保持弹窗打开并完成相关操作？ #

当然可以！除了让save()返回Promise的方式，你还可以通过手动控制Swal实例来完全掌控弹窗状态：

步骤1：获取Swal组件实例

在你的组件类中，通过@ViewChild获取模板中定义的#saveSwal实例：

import { SwalComponent } from '@sweetalert2/ngx-sweetalert2';
import { ViewChild } from '@angular/core';

// ...

@ViewChild('saveSwal') saveSwal!: SwalComponent;

步骤2：手动控制弹窗状态

在save()方法中，手动触发加载状态，完成操作后再更新弹窗内容或关闭：

save() {
  // 手动显示加载器
  this.saveSwal.showLoading();

  // 执行你的异步保存操作（比如调用API）
  this.yourSaveService.saveChanges().subscribe({
    next: () => {
      // 操作成功：更新弹窗显示成功信息
      this.saveSwal.update({
        title: '保存成功！',
        text: '你的修改已安全保存',
        icon: 'success',
        showConfirmButton: true,
        showLoaderOnConfirm: false
      });
      // 可选：2秒后自动关闭弹窗
      setTimeout(() => this.saveSwal.close(), 2000);
    },
    error: () => {
      // 操作失败：更新弹窗显示错误信息
      this.saveSwal.update({
        title: '保存失败',
        text: '请检查网络连接后重试',
        icon: 'error',
        showConfirmButton: true,
        showLoaderOnConfirm: false
      });
    }
  });
}

这种方式让你完全控制弹窗的生命周期，既可以保持弹窗打开直到操作完成，还能根据操作结果动态更新弹窗内容。

内容的提问来源于stack exchange，提问作者Mahi Tej Gvp