如何在angular2中使用sweetalert2 [英] How to use sweetalert2 in angular2

问题描述

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

Getting this error after npm start in angular project.

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

app/app.component.ts(12,7): error TS2304: Cannot find name 'swal'. app/app.component.ts(21,7): error TS2304: Cannot find name 'swal'.

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

I created an angular project. Inside app.component.ts I added sweet alert code

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中添加了路径

and also added the path in 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">

推荐答案

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

Solution given by @yurzui is the only worked with angular2. I tried almost everything. Plunker may go away. i'm putting it here for others:

Plunker

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

1) Add these css and js on top of your index.html

<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的组件。

2) Add this line to the component where you want to use swal.

declare var swal: any;

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

After these changes my swal namespace is available and i'm able to use it's features.

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

I did not import any ng2-sweelalert2 or any other module.

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