Sweetalert как услуга в Angular

Question

Я пытаюсь создать CRUD в Angular. Судя по всему, CRUD работает, но я хочу улучшить код, поэтому мне нужно избегать некоторого подслащивающего кода, который можно использовать только один раз. Я думаю, что я могу создать сервис и создавать различные функции, как это

export ModalClass{
    showconfirmdialog(title, text, icon){
    swal({
      title: "Are you sure?",
      text: "Once deleted, you will not be able to recover this imaginary file!",
      icon: "warning",
      buttons: true,
    })
    .then((willDelete) => {
      if (willDelete) {
        swal("Poof! Your imaginary file has been deleted!", {
          icon: "success",
        });
      } else {
        swal("Your imaginary file is safe!");
      }
    });
    }
}

Затем в файле .ts введите этот класс и функции, подобные этой

import {ModalClass} from 'blabla'
    deletefunction(){
         this.http.get('API').subscribe()
         this.ModalClass.showconfirmdialog('Was deleted','all ok', 'fa-ok')
     }

Ничего не происходит. Я отлаживаю ответ и возвращаю что-то вроде

[Объект Объект]

Итак, вопрос: как я могу создать сервис с повторно используемым кодом и внедрить его в TS-файлы?

Answer 1

Вам не нужно создавать свой собственный сервис, есть несколько пакетов, которые делают это для вас.

Лучшим IMO является официальный пакет: sweetalert2 / ngx-sweetalert2 .

1 - Установите его:

npm install --save sweetalert2 @toverux/ngx-sweetalert2

2 - Импорт модуля:

import { SweetAlert2Module } from '@toverux/ngx-sweetalert2';

@NgModule({
    //=> Basic usage
    imports: [SweetAlert2Module.forRoot()],

    //=> Or provide default SweetAlert2-native options
    //   (here, we make Swal more Bootstrap-friendly)
    imports: [
        SweetAlert2Module.forRoot({
            buttonsStyling: false,
            customClass: 'modal-content',
            confirmButtonClass: 'btn btn-primary',
            cancelButtonClass: 'btn'
        })
    ],

    //=> In submodules only:
    imports: [SweetAlert2Module]
})
export class AppModule {
}

3 - Используйте его.

См. Документацию здесь

Дополнительный ответ:

Конечно, вы можете разработать свой собственный сервис, но вам нужно будет обернуть все ваши звонки в NgZone.run () и позаботиться о множестве проблем, которые вам появятся, создать глючит сервис, который доставит вам много головной боли.

Поверьте мне, я делал это с большим количеством библиотек в начале Angular 2+, когда таких пакетов не было.