使用Sweet alert与Typescript类

Question

我在一个看起来像这个

的typescript类中有一个方法

    var confirmation = confirm("Run Agent Job?");
    if (confirmation) {
        console.log('yes');
    } else {
        console.log('no');
    }

我正在尝试将其转换为使用Sweet Alert，所以在方法中我只是把它。但是Typescript无法识别它会引发Cannot find name swal

swal("hello");

我已导入甜蜜警报如下

<link href="~/Content/css/sweetalert.css" rel="stylesheet" />
<script src="~/Scripts/sweetalert.min.js"></script>

我做错了什么？如果我尝试在普通swal()文件中使用*.js，它就可以正常工作。只有当它在*.ts文件中时才会出现。

Answer 1

打字稿

我按照以下方式使用打字稿。在.ts文件的顶部使用：

import * as swal from 'sweetalert';

然后使用像这样的功能

swal({
  title: "Are you sure?",
  text: "You will not be able to undo this action",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: true
},
confirmed => {
   if(confirmed) {
       // Do what ever when the user click on the 'Yes, delete it' button
   }
});

您可以在docs中找到更多示例。

通过npm和typings安装

我通过npm

安装了sweetalert包

npm install sweetalert --save

和打字

// the old way
typings install dt~sweetalert --save --global 

// new way
npm install --save @types/sweetalert

在此之后，请确保您已在index.html中包含js 和 css文件。

如果收到以下错误

swal(..) is not a function

然后你没有正确地包含js文件。

对于aurelia CLI用户

您可以将以下内容添加到aurelia.json。

      {
        "name": "sweetalert",
        "path": "../node_modules/sweetalert",
        "main": "dist/sweetalert.min",
        "resources": [
          "dist/sweetalert.css"
        ]
      },

并在app.html中使用

<require from="sweetalert/dist/sweetalert.css"></require>

Answer 2

除了conn答案之外，Angular 5和sweetalert还有一个错误，这也会导致此错误。如果您使用的是角度5，则不能使用：

public MysqlConnector() {
   conn = Connector();

   if (conn != null) {
      // Do your things here
   }

}

相反，您需要解决以下问题：

@TomAalbers

Credit where it's due

  

这似乎与Angular CLI中的此错误有关，该错误中默认导出在开发人员中的处理方式有所不同。他们似乎已经在v6.0.0-beta.4

中修复了该问题

Answer 3

您必须将此内容导入您的课程顶部：

import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

并且不要忘记将其添加到您的app.module.ts文件中

Answer 4

我知道这是一个老问题，但是SweetAlert2和Angular的问题仍然存在（我使用Angular 9和Sweetalert2版本8.19.0）...经过数小时的头痛之后，我找到了解决该问题的最终方法，没有受到任何黑客攻击。 我们无法使用函数swal({...})，但可以使用Swal.fire({...})方法的第二次重载，将参数转换为SweetAlertOptions ... 我的代码看起来像这样...

import Swal, {SweetAlertOptions} from 'sweetalert2';
Swal.fire({
        title: 'Are you sure?',
        text: 'You won\'t be able to revert this!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      } as SweetAlertOptions).then((result) => {
        if (result.value) {
           //Do something here
        }
      });