时间戳

首页 > 解决方案 > Ionic 4 上的甜蜜警报，Typescript 文件中的输出警报

ionic4 - Ionic 4 上的甜蜜警报，Typescript 文件中的输出警报

问题描述

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

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

我希望发生但我无法这样做的过程是Sweet Alert 仅在电子邮件成功发送后出现，该过程发生在 .ts 文件中收到某个值后

下面是我在忘记密码.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 已成功提交时，

下面是我在忘记密码.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();

    });

  }

}

我尝试使用以下参考

使用带有 Typescript 类的 Sweet 警报

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

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

标签： ionic4sweetalert

解决方案

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

..忘记密码.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

推荐阅读