时间戳

首页 > 解决方案 > Swal 显示加载属性 HTML

html - Swal 显示加载属性 HTML

问题描述

我正在使用 SWAL2 (Sweet Alert2) 来显示警报，并且我想显示加载进度微调器，但是对于 html，没有文档仅显示加载微调器。有一个属性showLoaderOnConfirm，它会在您单击确认按钮后显示加载微调器。我只想在显示警报时显示加载微调器，并通过 html 实现。

当您单击查找时，它会发生这样的事情：https ://sweetalert2.github.io/#ajax-request

<button mat-button type="button" [disabled]="paymentModeForm.get('endpoint').value == ''" (click)="testConn.show()" color="primary">
        <mat-icon matPrefix>power</mat-icon>
        <span i18n="@@testConnButton">Test Connection</span>
</button>
<swal #testConn title="Testing connection..." text="Checking the connection to {{paymentMode?.paymentMode}}" [showLoaderOnConfirm]="true"></swal>

使用 .TS 我可以做到：

  async testConnection(): Promise<void> {
    Swal.fire({
      title: 'Auto close alert!',
      timer: 3000,
      onBeforeOpen: () => {
        Swal.showLoading()
      }
    })
  }

文档：https ://sweetalert2.github.io/#frameworks-integrations

标签： htmlangularsweetalert2angular8

解决方案

您可以使用甜蜜警报中提供的 html 描述并在其中显示加载 gif。

Swal.fire({
  title: 'Auto close alert!',
  timer: 3000,
  html:
    '<img src="https://media.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif">'
  })

推荐阅读