Как использовать sweetalert2 в angular2

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

<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 является работал только с угловым2. Я пробовал почти все. Плункер может уйти. я ставлю его здесь для других:

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; 

После этих изменений мое пространство имен swale доступно, и я могу использовать его функции.

Я не ввозил ни одного ng2-sweelalert2 или любого другого модуля.

Answer 2

Решение @ user1501382 очень удобно иногда для пакетов pure-JavaScript, которые, например, не имеют определений типов, и это было в случае с SweetAlert2, до тех пор, пока несколько недель назад. Кроме того, использование глобальной переменной swal не очень аккуратно, и вы можете сделать гораздо лучше.

Теперь, когда SweetAlert2 имеет тип ОПРЕДЕЛЕНИЯХ, вы можете сделать:

import swal from 'sweetalert2'; 

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

импорта также файл CSS SweetAlert, в через <link> или любой другой. При использовании модуля Bundler как Webpack и у вас есть CSS-погрузчик и стиль-погрузчик настроен, вы также можете сделать что-то вроде:

import 'sweetalert2/dist/sweetalert2.css'; 

Edit: это не должно быть необходимым, так как SweetAlert2 ст. 7.0.0, который объединяет сборку CSS в JavaScript и внедряет стили на странице во время выполнения.

Кроме того, я дам вам открыть свою библиотеку, которая обеспечивает радиально-эск утилиты использовать SweetAlert2 с легкостью и класса: @toverux/ngx-sweetalert2 (это теперь официальная интеграция SweetAlert2 для Угловое)

Дайте ему пытаться!

Answer 3

это, как я использую его на моих проектах

npm install sweetalert2 

после установки добавить swal в окно

window.swal = require('sweetalert2'); 

вот и все. , если у вас возникли проблемы с CSS, просто импортировать файл SCSS

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

или включить файл CSS из каталога node_module

Answer 4

НПХ установками 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 :)' 
      }) 
      } 
     }); 
    } 

В угловом-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 и ц 2.1