如何在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/sweetalert2@4.0.15/dist/sweetalert2.min.css">

<script src="https://npmcdn.com/sweetalert2@4.0.15/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