Javascript Sweetalert在Angular中作为服务

我试图在角度上创造一个积垢。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!");
      }
    });
    }
}

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

然后在.ts文件中注入这个类和如下函数

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!");
      }
    });
    }
}

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

什么也没发生。我调试响应并返回如下内容

[对象]

---

所以问题是：我如何创建一个具有可重用代码的服务，并将其插入ts文件中？

您不需要创建自己的服务，有几个软件包可以为您创建服务

最好的IMO是官方软件包：

1-安装它：

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

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 {
}

2-导入模块：

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

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-使用它。

请参阅文档

其他答案：

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

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 {
}

当然，你可以开发自己的服务，但是你需要把所有的电话都打包在里面，处理很多你会遇到的问题，创建一个让你头疼的错误服务

---

相信我，在Angular 2+开始时，我使用了很多库，当时还没有这样的包

什么angular版本？angular 7，最新版本。这可能是一个选项，但我没有时间重写代码，旧代码直接使用sweetalert js。@ElHombreSinNombre无论如何，您需要更改angular中的任何代码才能使用您的服务或第三方服务。我推荐第三方。你有没有试着用ng sweetalert来展示sweetalert吐司？我可以在空闲时间测试这个包，但是除了modals之外的应用程序使用toast。