javascript - Sweetalert 作为 Angular 中的服务

Question

我正在尝试在 Angular 中创建 CRUD。显然 CRUD 有效，但我想改进代码，所以我需要避免一些只使用一次的 sweetalert 代码。我想我可以创建一个服务并创建不同的功能，就像这样

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 文件中注入(inject)这个类和这样的函数

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

什么也没发生。我调试响应并返回类似的内容

[Object Object]

所以问题是:我如何创建具有可重用代码的服务并将其注入(inject) ts 文件中？

Answer 1

您不需要创建自己的服务，有一些软件包可以为您完成此任务。

IMO 最好的是官方包:@sweetalert2/ngx-sweetalert2 .

1 - 安装它:

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

2 - 导入模块:

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

@NgModule({
    //=> Basic usage (forRoot can also take options, see details below)
    imports: [SweetAlert2Module.forRoot()],

    //=> In submodules only:
    imports: [SweetAlert2Module],

    //=> In submodules only, overriding options from your root module:
    imports: [SweetAlert2Module.forChild({ /* options */ })]
})
export class AppModule {
}

3 - 使用它。

请参阅文档 here

附加答案:

当然，您可以开发自己的服务，但您需要将所有调用包装在 NgZone.run() 内并处理你会出现的很多问题，创建一个有缺陷的服务，这会让你很头疼。

相信我，我在 Angular 2+ 初期使用了很多库来实现这一点，当时还没有这样的包。