在Typescript类中使用Sweet Alert [英] Using Sweet alert with Typescript class

问题描述

我在打字稿类中有一个看起来像这样的方法

I have a method inside a typescript class that just looks like this

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

我正在尝试将其转换为使用Sweet Alert，因此在方法内部我只是放入了它.但是Typescript无法识别它，它抛出Cannot find name swal

I'm trying to convert this to use Sweet Alert, so inside the method I just put this. But Typescript doesn't recognize this It throws a Cannot find name swal

swal("hello");

我已按如下所示导入了甜蜜警报

I have imported sweet alert as follows

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

我做错了什么?如果我尝试仅在普通的*.js文件中使用swal()，它将正常工作.仅当它在*.ts文件中时.

What am I doing wrong? If I try to use swal() in just a plain *.js file, it'll work fine. It's only when it's in a *.ts file.

推荐答案

打字稿

我可以通过以下方式使用打字稿.在.ts文件顶部，使用:

Typescript

I got it to work with typescript the following way. In the top of your .ts file use:

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

您可以在文档中找到更多示例.

You can find more examples in the docs.

我通过npm安装了sweetalert软件包

I installed the sweetalert package the via npm

npm install sweetalert --save

和打字

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

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

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

After this, make sure you have included the js and the css file in your index.html.

如果出现以下错误

swal(..) is not a function

然后您没有正确包含js文件.

then you have not included the js file properly.

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

You can add the following to your aurelia.json.

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

并在app.html中使用

and in app.html use

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

这篇关于在Typescript类中使用Sweet Alert的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！