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

Ответ 1

Решение, данное @yurzui, работает только с angular2. Я пробовал почти все. Плункер может уйти. Я помещаю его здесь для других:

Plunker

1) Добавьте эти css и js поверх вашего index.html

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/sweetalert2.min.css">

<script src="https://npmcdn.com/[email protected]/dist/sweetalert2.min.js"></script>

2) Добавьте эту строку к компоненту, где вы хотите использовать swal.

declare var swal: any;

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

Я не импортировал ни один ng2-sweelalert2 или какой-либо другой модуль.

Ответ 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"
        ],

Ответ 3

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

Теперь, когда SweetAlert2 имеет определения типов, вы можете сделать:

import swal from 'sweetalert2';

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

Также импортируйте файл SweetAlert CSS через <link> или что-то еще. Когда вы используете пакетный модуль, такой как Webpack, и у вас настроены css-loader и style-loader, вы также можете сделать что-то вроде:

import 'sweetalert2/dist/sweetalert2.css';

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

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

Попробуйте!

Ответ 4

вот как я использую его в своих проектах

npm install sweetalert2

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

window.swal = require('sweetalert2');

вот и все. если у вас возникла проблема с css, просто импортируйте файл scss

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

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

Ответ 5

npm установить sweetalert2

Ты можешь попробовать:

import swal from 'sweetalert2'; 

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

Ответ 6

попробуйте это: https://sweetalert.js.org/guides/#installation но либо вы загружаете файл .js и сохраняете его в файле sweetalert.min.js в папке с ресурсами

в вашем index.html ссылаются на файл, созданный вами в активах

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

и в вашем компоненте напишите

declare var swal any 

он работает со мной, как магия, я использую angular 4 и ts 2.1