如何在angular2中使用sweetalert2

Question

在角度項目中啓動npm後出現此錯誤。

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我加甜，報警代碼

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的路徑由@yurzui給出

<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

解決方案是隻與angular2一起工作。我嘗試了幾乎所有東西Plunker可能會離開。我把在這裏的人：

Plunker

1） 添加這些CSS和JS在你的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。

declare var swal: any; 

經過這些更改後，我的swal名稱空間可用，我可以使用它的功能。

我沒有導入任何ng2-sweelalert2或任何其他模塊。

Answer 2

@ user1501382的解決方案有時對於沒有類型定義的純JavaScript包非常方便，例如，直到幾周前SweetAlert2就是這種情況。 此外，使用全球swal變量不是很整齊，你可以做得更好。

現在SweetAlert2具有類型defintions，你可以這樣做：

import swal from 'sweetalert2'; 

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

還進口SweetAlert的CSS文件，通過<link>或什麼的。當你使用一個模塊捆綁喜歡的WebPack和你的CSS-裝載機和風格加載器配置，你也可以這樣做：

import 'sweetalert2/dist/sweetalert2.css'; 

編輯：這不應該，因爲SweetAlert2 v爲必要。 7.0.0，它將CSS構建捆綁到JavaScript中，並在運行時注入頁面中的樣式。

而且，我會讓你發現我的圖書館，提供角式的工具來使用SweetAlert2輕鬆和類：@toverux/ngx-sweetalert2（現在是角官方SweetAlert2集成）

給它一個嘗試！

Answer 3

這是我如何使用它在我的項目

npm install sweetalert2 

安裝添加到SwaI位窗口

window.swal = require('sweetalert2'); 

多數民衆贊成後。 如果您在使用的CSS問題，只是導入SCSS文件

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

或包括來自node_module目錄

Answer 4

NPM CSS文件安裝SweetAlert2

npm install sweetalert2 

您可以添加

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

在你的組件中，你可以開始使用像你的COM Ponent（波納恩特）。

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 :)' 
      }) 
      } 
     }); 
    } 

在角cli.json

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

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

Answer 5

嘗試了這一點： https://sweetalert.js.org/guides/#installation 但任你下載.js文件並將其保存在sweetalert.min.js資產文件夾

在您的index.html中參考您在資產中創建的文件

<script src="assets/sweetalert.min.js"></script> 

，並在你的組件寫入

declare var swal any 

它與我的作品像變魔術一樣，我使用的角度4個TS 2.1