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的组件类中创建属性，然后使用[options]提供的<swal></swal> @Input装饰器进行属性绑定。 1}}组件。

为此，您必须导入SweetAlertOptions，如下所示

import swal,{ SweetAlertOptions } from 'sweetalert2';

我还创建了一个按钮，可以在组件类中手动打开警报，并在异步操作完成后使用.then()显示成功消息。我使用了ViewChild并导入了{{1} } 为了这。

组件类代码

app.component.ts

SwalComponent

HTML文件

app.component.html

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");
  }
}

<强> app.module.ts

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

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

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

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

点击确认按钮关闭swal

1 个答案: