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

例如，对于没有类型定义的纯JavaScript包，@ user1501382的解决方案非常方便，而且几周之前就是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

首先，使用sweetalert2安装npm。然后import Swal from 'sweetalert2'

在app.component.html

<input type="button" value="Show Toast" class="btn btn-primary" (click)="showToast()"/>

<input type="button" value="Show Message" class="btn btn-primary" (click)="showMessage()"/>

在app.component.ts

showToast(){
Swal.fire({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, title: 'Success!', text: 'Sweet Alert Toast', icon: 'success', });
  }

  showMessage(){
    Swal.fire({ text: 'Hello!', icon: 'success'});
  }

stackblitz

Answer 5

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

npm install sweetalert2

安装添加swal到窗口后

window.swal = require('sweetalert2');

这就是全部。如果您遇到css问题，只需导入scss文件

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

或包含node_module目录中的css文件

Answer 6

npm install sweetalert2

您可以尝试：

import swal from 'sweetalert2'; 

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

如何在angular2中使用sweetalert2

6 个答案: