Question

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

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

我无法做到的过程是 Sweet Alert仅在成功发送电子邮件后出现，该过程在.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，但是我不想这样做，因为我希望在emel成功提交后出现swal，

下面是我在 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.

Answer 1

将甜蜜警报集成到项目中的步骤 ..npm安装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
});
  
}

}

forgot-password.page.html

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

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

Ionic 4上的Sweet Alert，打字稿文件中的输出警报

1 个答案: