18

在 Angular 项目中启动 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">
4

6 回答 6

22

@yurzui 给出的解决方案是唯一适用于 angular2 的解决方案。我几乎尝试了一切。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或任何其他模块。

于 2016-10-06T08:38:54.280 回答
11

NPM 安装 SweetAlert2

npm install sweetalert2

你可以加

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

在您的组件中，您可以开始在您的组件中使用 like。

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"
        ],
于 2017-08-09T14:18:36.210 回答
8

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

现在 SweetAlert2 有类型定义，你可以这样做：

import swal from 'sweetalert2';

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

<link>还可以通过 a或其他方式导入 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 集成）

试试看！

于 2017-01-31T23:02:09.410 回答
6

npm 安装 sweetalert2

你可以试试：

import swal from 'sweetalert2'; 

swal.fire('Hello world!')//fire
于 2019-04-17T12:12:49.567 回答
1

首先，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'});
  }

堆栈闪电战

于 2020-08-21T18:29:27.617 回答
0

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

npm install sweetalert2

安装后将 swal 添加到窗口

window.swal = require('sweetalert2');

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

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

或包含 node_module 目录中的 css 文件

于 2017-03-16T11:10:26.013 回答