Ionic 4 上的甜蜜警报，Typescript 文件中的输出警报答案

【问题标题】：Sweet Alert On Ionic 4, Output Alert Inside Typescript FileIonic 4 上的甜蜜警报，Typescript 文件中的输出警报
【发布时间】：2019-10-23 10:24:02
【问题描述】：

我正在开发一个忘记密码的流程，忘记密码的流程如下

用户在电子邮件中输入密码以重置密码，
当用户点击提交时，一个进程将被发送到服务器端进行后端处理（在这种情况下，我将 PHP 作为后端，MySQL 作为数据库），
成功提交电子邮件后，将出现一个甜蜜的警报弹出窗口，告诉用户电子邮件已成功发送

我希望发生但我无法这样做的过程是只有在电子邮件成功发送后才会出现甜蜜警报，该过程会在 .ts 文件中收到某个值后发生

下面是我的代码 forget-password.page.html


// CODE NO 1 
<button (click)="confirmSentForgotPassword()" style="letter-spacing: 1px" button margin-top>
      SUBMIT
</button>

// CODE NO 2
//<button [swal]="submit" style="letter-spacing: 1px" button margin-top>
//     SUBMIT
//</button>

<swal
        #submit
        title="Check Your Email"
        text="An email has been sent to that address containing a link to reset your password."
        type="success"
        (confirm)="dismiss()">
</swal>

如果我使用代码 2，我可以在按钮提交时输出 swal，但我不想这样做，因为我希望 swal 在 emel 已成功提交时出现，

以下是我在 forget-password.page.ts

的代码

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
import { PostProvider } from 'src/providers/post-provider';

import {
  LoadingController,
  ToastController
} from '@ionic/angular';

@Component({
  selector: 'app-forget-password',
  templateUrl: './forget-password.page.html',
  styleUrls: ['./forget-password.page.scss'],
})
export class ForgetPasswordPage implements OnInit {

  email: string = null;

  constructor(
    private modalCtrl: ModalController, 
    public swal: SweetAlert2Module,
    private loadingCtrl: LoadingController,
    private postPvdr: PostProvider,
    private toastCtrl: ToastController,
    ) { }

  ngOnInit() {
  }

  async dismiss() {
    this.modalCtrl.dismiss();
  }

  async confirmSentForgotPassword() {

    let body = {
      action: 'emel-forgot-password',
      email: this.email
    };

    let loading = await this.loadingCtrl.create({
      message: 'Loading...'
    });
    await loading.present();

    this.postPvdr.postData(body, 'forgotpassword-api.php').subscribe(async data2 =>{
        loading.dismiss();

        // CODE ALERT 
        // this.swal({
        //   title: "Check Your Email",
        //   text: "An email has been sent to that address containing a link to reset your password.",
        //   type: "success",
        //   showCancelButton: true,
        //   confirmButtonColor: "#DD6B55",
        //   closeOnConfirm: true
        // },
        // confirmed => {
        //    if(confirmed) {
        //        this.dismiss();
        //    }
        // });

        const toast = await this.toastCtrl.create({
          message: data2.msg,
          duration: 2000
        });

        toast.present();

    },async err=>{
      loading.dismiss();

      console.log(err);

      const toast = await this.toastCtrl.create({
        message: "Error On Server Side ",
        duration: 2000
      });

      toast.present();

    });

  }

}

我尝试过使用以下参考

Using Sweet alert with Typescript class

但是当使用 swal 时，我的 VSCode 上会出现以下错误

This expression is not callable. Type 'SweetAlert2Module' has no call signatures.

【问题讨论】：

标签： ionic4 sweetalert

【解决方案1】：

在您的项目中集成甜蜜警报的步骤 ..npm install sweetalert2

..forget-password.ts

import Swal from 'sweetalert2'

@Component({
  selector: 'app-forget-password',
  templateUrl: './forget-password.page.html',
  styleUrls: ['./forget-password.page.scss'],
})
export class ForgetPasswordPage implements OnInit {

  email: string = null;

  constructor() { }

  ngOnInit() {
  }
   
confirmSentForgotPassword(){
Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
});
  
}

}

忘记密码.page.html

<button (click)="confirmSentForgotPassword()" style="letter-spacing: 1px" button margin-top>
      SUBMIT
</button>

查看此链接以获取更多示例https://sweetalert2.github.io

【讨论】：