Ionic确认弹窗：等待点击弹窗后再继续。

Question

我有一个运行任意代码的函数，名为calculate()。我有一个if条件，如果它是true，我会弹出一个ionic确认警报。

我可以让确认警报弹出，但是我试图使用async/await等待确认中的响应，但是我的理解可能是错误的。这基本上是我正在做的：

import { AlertController } from '@ionic/angular';

export class Calculator {
  private cancelResults:boolean = false;

  constructor(private alertController:AlertController) {}

  async calculate() {
    // If my condition is true.
    if (true) {
      // show the user a confirm alert.
      await this.warn();

      // break out of function since they hit cancel.
      if (this.cancelResults) return;
    }

    // The user hit Okay, continue with this function.
  }

  async warn() {
    const alert = await this.alertController.create({
      header: 'confirm',
      message: 'my message',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: (blah) => {
            console.log('they hit cancel');
            this.cancelResults = true;
            return new Promise(resolve => setTimeout(resolve, 2000));
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('they hit ok');
            return new Promise(resolve => setTimeout(resolve, 2000));
          }
        }
      ]
    });

    await alert.present();
  }
}

当确认框弹出时，calculate()函数的其余部分继续执行。我希望它等待确认响应。

有任何想法如何实现这一点吗？

- Ronnie

---

这个教程应该能帮助你理解async await https://www.youtube.com/watch?v=vn3tm0quoqE - Juan Lozoya

谢谢@JuanLozoya，那是一个做得很好的视频，解释了很多东西。 - Ronnie

Answer 1

我明白了！我需要先将await设置为一个常量，然后包装对话框在一个Promise中，而不是每个响应返回一个单独的Promise。

import { AlertController } from '@ionic/angular';

export class Calculator {
  constructor(private alertController:AlertController) {}

  async calculate() {
    // If my condition is true.
    if (true) {
      // show the user a confirm alert.
      const confirmation = await this.warn();
      // break out of function since they hit cancel.
      if (!confirmation) return;
    }

    // The user hit Okay, continue with this function.
  }

  async warn() {
    return new Promise(async (resolve) => {
      const confirm = await this.alertController.create({
        header: 'confirm',
        message: 'my message',
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            handler: () => {
              return resolve(false);
            },
          },
          {
            text: 'OK',
            handler: () => {
              return resolve(true);
            },
          },
        ],
      });

      await confirm.present();
    });
  }
}

- Ronnie

---

啊哈！我之前正在处理这个问题，但是得跑一趟腿。谢谢你发布了解决方案！我也点赞了你的好问题。 :-) - NickyTheWrench

有用的。谢谢。 - MadMac

Answer 2

最近我也需要解决这个问题。对于未来的读者，我认为更简单的方法是返回onDidDismiss()承诺并检查所选按钮的角色。此外，您可以检查“背景”角色以防止用户通过单击背景取消操作。

const confirmation = await this.myAlert('Confirm', 'Message');

if (confirmation.role === 'cancel' || confirmation.role === 'backdrop') {
  // clean up code
  return;
}

myAlert(header: string, message: string) {
  return this.alertCtrl
    .create({
      header: header,
      message: message,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
        },
        {
          text: 'Okay',
        },
      ],
    })
    .then((alertEl) => {
      alertEl.present();
      return alertEl.onDidDismiss();
    });
}

- MikeCruz13

---

我喜欢它！也是一个很好的解决方案。 - Ronnie

所以如果我理解正确，这是一个链接的 Promise？警报被呈现，当它被解除时，myAlert 函数返回？有人知道如何将其包装在 RxJS 可观察对象中吗？ - fonzane