在ionic5中创建可重复使用的通用警报

Question

我是ionic的新手，我想创建一个自定义警报框，并希望在具有不同标题和消息的每个页面中使用。我想为其创建单独的组件，并希望传递标题和消息值。您能否建议我这样做的正确方法是什么。

这是我的代码：

async presentAlertConfirm() {
    const alert = await this.alertController.create({
      cssClass: 'alertCustomCss',
      header: 'Confirm Action',
      message: 'Are you sure you want to delete this <div><img src = "./assets/icon/alert-circle-outline.svg" width="35px" height="35px"></div>',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          cssClass: 'cancel-btn',
          handler: (blah) => {
            console.log('Confirm Cancel);
          }
        }, {
          text: 'Yes',
          cssClass: 'ok-btn',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

我想将此代码放在单独的组件中，并希望使其可重用。

Answer 1

您可以为此使用服务。

将警报功能这样放置到您的服务中

async presentAlertConfirm(header: string, massage: string) {
    const alert = await this.alertController.create({
      cssClass: 'alertCustomCss',
      header,
      massage,
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          cssClass: 'cancel-btn',
          handler: (blah) => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Yes',
          cssClass: 'ok-btn',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
    return alert;
  }

然后您可以在导入服务的任何地方使用此功能。（我没有测试代码）