单击确认按钮关闭 swal

Question

点击确认按钮关闭 swal 这是预期的行为吗？如果是这样，我如何实现示例中显示的 loading example？我的 swal 代码是

<swal #saveSwal
title="Are you sure?"
text ="Do you want to save changes"
cancelButtonColor="#d33"
showCancelButton="true"
cancelButtonText="No! Review"
confirmButtonColor="#3085d6"
confirmButtonText='Yes, Save progress'
(confirm)="save()"
[showLoaderOnConfirm]="true"

[focusCancel]="true">

有没有办法让 swal 保持打开状态并显示加载动画直到异步操作完成？

Answer 1

您还需要设置 preConfirm 属性和 showLoaderOnConfirm 以执行异步调用并保持警报打开。与其在 HTML 中提及 sweetalert 的所有配置选项，不如在 SweetAlertOptions 类型的组件 class 中创建一个属性然后使用属性与 <swal></swal> 组件提供的 [options] @Input 装饰器绑定。

为此，您必须像下面那样导入 SweetAlertOptions

import swal,{ SweetAlertOptions } from 'sweetalert2';

我还在组件 class 中创建了一个手动打开警报的按钮，并使用 .then() 在异步操作完成后显示成功消息 done.I 使用了 ViewChild 并为此导入了 SwalComponent。

组件代码 class

app.component.ts

import { Component, ViewChild} from '@angular/core';
import swal,{ SweetAlertOptions } from 'sweetalert2';
import { SwalComponent } from '@toverux/ngx-sweetalert2';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  public alertOption:SweetAlertOptions = {};
  @ViewChild('saveSwal') private saveSwal: SwalComponent;

  constructor(){
    this.alertOption = {
      title:"Are you sure?",
      text:"Do you want to save changes",
      cancelButtonColor:"#d33",
      showCancelButton:true,
      cancelButtonText:"No! Review",
      confirmButtonColor:"#3085d6",
      confirmButtonText:'Yes, Save progress',
      showLoaderOnConfirm:true,
      focusCancel:true,
      preConfirm: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("Doing async operation");
        resolve()
      }, 5000)
    })
  },
  allowOutsideClick: () => !swal.isLoading()
    }
  }

  showAlert(evt:any){
    this.saveSwal.show().then(() => {
      swal({
      type: 'success',
      title: 'Ajax request finished!'
    })
   })
  }
  save(){
    console.log("data saved");
  }
}

HTML 文件

app.component.html

<swal #saveSwal
(confirm)="save()"
[options]="alertOption"
>
</swal>

<button (click)="showAlert($event)">Click here</button>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { SweetAlert2Module } from '@toverux/ngx-sweetalert2';

@NgModule({
  imports:      [ BrowserModule, FormsModule, SweetAlert2Module.forRoot()],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

使用此代码，加载程序将保持打开警报，直到异步调用完成，然后显示成功消息。

工作演示： https://stackblitz.com/edit/angular4-ifaa17?file=app%2Fapp.component.ts

单击确认按钮关闭 swal

clicking on confirm button closes the swal

typescript

sweetalert

angular

sweetalert2