如何在angular2中使用sweetalert2

Question

在角度项目中的npm开始后获取此错误。

app / app.component.ts（12,7）：错误TS2304：找不到名称'swal'。 app / app.component.ts（21,7）：错误TS2304：找不到名称'swal'。

我创建了一个角度项目。在app.component.ts里面我添加了甜蜜的警报代码

export class AppComponent {
deleteRow() {
      swal({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then(function() {
      swal(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      );
    })
  }
}

我做到了

npm install sweetalert2 --save 

并在index.html中添加了路径

<script src="node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert2/dist/sweetalert2.css">

Answer 1

@yurzui给出的解决方案是唯一适用于angular2的解决方案。我几乎尝试了一切。 Plunker可能会消失。我把它放在别人身边：

Plunker

1）在index.html之上添加这些css和js

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/sweetalert2.min.css">

<script src="https://npmcdn.com/[email protected]/dist/sweetalert2.min.js"></script>

2）将此行添加到要使用swal的组件中。

declare var swal: any;

在这些更改后，我的swal命名空间可用，我可以使用它的功能。

我没有导入任何ng2-sweelalert2或任何其他模块。

Answer 2

NPM安装SweetAlert2

npm install sweetalert2

你可以加

import swal from 'swal'; 
//import swal from 'sweetalert2'; --if above one didn't work

在您的组件中，您可以像在组件中一样开始使用。

swal({
  title: 'Error!',
  text: 'Do you want to continue',
  type: 'error',
  confirmButtonText: 'Cool'
})

您可以使用胖箭头来维护它。

deleteStaff(staffId: number) {
     swal({
          type:'warning',
          title: 'Are you sure to Delete Staff?',
          text: 'You will not be able to recover the data of Staff',
          showCancelButton: true,
          confirmButtonColor: '#049F0C',
          cancelButtonColor:'#ff0000',
          confirmButtonText: 'Yes, delete it!',
          cancelButtonText: 'No, keep it'
        }).then(() => {
        this.dataService.deleteStaff(staffId).subscribe(
          data => {
            if (data.hasOwnProperty('error')) {
              this.alertService.error(data.error);
            } else if (data.status) {
              swal({
                type:'success',
                title: 'Deleted!',
                text: 'The Staff has been deleted.',              
              })
            }
          }, error => {
            this.alertService.error(error);
          });
        }, (dismiss) => {
          // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
          if (dismiss === 'cancel') {
            swal({
              type:'info',
              title: 'Cancelled',
              text: 'Your Staff file is safe :)'
            })
          }
        });
    }

在angular-cli.json中

"styles": [
            "../node_modules/sweetalert2/dist/sweetalert2.css"

        ],
"scripts": [
            "../node_modules/sweetalert2/dist/sweetalert2.js"
        ],

Answer 3

@ user1501382的解决方案对于没有类型定义的纯JavaScript包有时非常方便，例如，几周前，SweetAlert2就是这种情况。此外，使用全局swal变量不是很整洁，你可以做得更好。

既然SweetAlert2有类型定义，你可以这样做：

import swal from 'sweetalert2';

swal({ ... }); // then use it normally and enjoy type-safety!

还可以通过<link>或其他方式导入SweetAlert的CSS文件。当您使用像Webpack这样的模块捆绑器并且配置了css-loader和style-loader时，您还可以执行以下操作：

import 'sweetalert2/dist/sweetalert2.css';

编辑：从SweetAlert2 v.7.0.0开始，这不是必需的，它将CSS构建捆绑到JavaScript中，并在运行时在页面中注入样式。

另外，我会让你发现我的库，它提供了Angular-esque实用程序，可以轻松地使用SweetAlert2和类：sweetalert2/ngx-sweetalert2（它现在是Angular的官方SweetAlert2集成）

试试看！

Answer 4

npm安装sweetalert2

你可以试试：

import swal from 'sweetalert2'; 

swal.fire('Hello world!')//fire

Answer 5

这就是我在我的项目中使用它的方式

npm install sweetalert2

安装后添加swal到窗口

window.swal = require('sweetalert2');

就这样。如果您遇到css问题，只需导入scss文件即可

@import "node_modules/sweetalert2/src/sweetalert2";

或者包含node_module目录中的css文件