在前端开发中，弹出框（Alert）是不可避免的，特别是在处理表单提交、删除确认等场景。SweetAlert 是一款免费开源的弹窗框架，易于使用且功能强大，可定制化程度高。本文将介绍如何使用 Angular 的 ng-sweetalert-service 库来使用 SweetAlert。

安装 ng-sweetalert-service

首先需要使用 npm 安装 ng-sweetalert-service 库。

npm install ng-sweetalert-service --save

导入 ng-sweetalert-service

在需要使用 SweetAlert 的组件中导入 ng-sweetalert-service。

import { SweetAlertService } from 'ng-sweetalert-service';

使用 SweetAlert

显示成功提示框

在组件中注入 SweetAlertService，即可使用 sweetalert2 的方式弹出提示框。例如：

-- -------------------- ---- -------
------------
  ------- ------------- -----------------
- --

------------------ -
  ------------------------
    ------ -------
    ----- ---------
  ---
-

显示确认框

显示确认框可以使用弹出框触发 promise 或 observable 完成后续操作。例如：

-- -------------------- ---- -------
------------------ -
  ------------------------
    ------ -----------
    ----- ----------
    ----------------- -----
    ------------------ ---------
    ----------------- -----
  ---------------- -- -
    -- -------------- -
      -- -----------
    - ---- -
      -- ------------------
    -
  ---
-

定制 SweetAlert

ng-sweetalert-service 提供了各种不同的选项和回调函数，可让 SweetAlert 提供更多的定制功能，实现可交互的、可定制的弹窗。

-- -------------------- ---- -------
----------------- -
  ------------------------
    ------ ---------
    ----- -------
    ----- -----------
    ------ -------
    ---------------- -
      ---------- ----
    --
    ----------------- -----
    ------------------ -----
    ----------------- -----
    -------------------- -----
    ----------- ------ -- -
      ------ -------------------------
    --
    ------------------ -- -- ------------------------------
  ---------------- -- -
    -- -------------- -
      -- -----------
    - ---- -
      -- ------------------
    -
  ---
-

------- ------------------- -------- ------------ -
  ------ --- ----------------- ------- -- -
    -- ------ -
      ----------
    - ---- -
      ---------- ------------------
    -
  ---
-

示例代码

完整的组件示例代码如下：

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ------------------------

------------
  --------- -------------------
  ------------ --------------------------------
  ---------- ---------------------------------
--
------ ----- ----------- -
  ------------
    ------- ------------- -----------------
  - --

  ------------------ -
    ------------------------
      ------ -------
      ----- ---------
    ---
  -

  ------------------ -
    ------------------------
      ------ -----------
      ----- ----------
      ----------------- -----
      ------------------ ---------
      ----------------- -----
    ---------------- -- -
      -- -------------- -
        -- -----------
      - ---- -
        -- ------------------
      -
    ---
  -

  ----------------- -
    ------------------------
      ------ ---------
      ----- -------
      ----- -----------
      ------ -------
      ---------------- -
        ---------- ----
      --
      ----------------- -----
      ------------------ -----
      ----------------- -----
      -------------------- -----
      ----------- ------ -- -
        ------ -------------------------
      --
      ------------------ -- -- ------------------------------
    ---------------- -- -
      -- -------------- -
        -- -----------
      - ---- -
        -- ------------------
      -
    ---
  -

  ------- ------------------- -------- ------------ -
    ------ --- ----------------- ------- -- -
      -- ------ -
        ----------
      - ---- -
        ---------- ------------------
      -
    ---
  -
-

总结

通过本文的学习，我们了解了如何使用 SweetAlert 框架，以及如何使用 ng-sweetalert-service 库来集成 SweetAlert。通过本库，我们可以轻松地在 Angular 应用程序中使用 SweetAlert 进行交互，从而为用户提供更好的体验。希望本文对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f7a238a385564ab69d4

npm 包 ng-sweetalert-service 使用教程