前言
在 Angular 项目中，如果需要使用 modal(弹窗) 功能，很多人会选择 ngx-bootstrap或者ng-bootstrap。其中，ng-bootstrap库提供了非常多的模块，包括模态框组件（ngb-modal）,不过这个组件在使用的时候有一个问题，就是在多层模态框嵌套时，会出现一些问题，这时就需要使用一个辅助包 ng-bootstrap-modal-stack 。
在这篇文章中，我将向您介绍使用npm包 ng-bootstrap-modal-stack 的方法，以及解决多层模态框嵌套问题的原理。
安装
要使用 ng-bootstrap-modal-stack 包，必须先安装 ng-bootstrap。
npm install --save @ng-bootstrap/ng-bootstrap
完成后，安装 ng-bootstrap-modal-stack
npm install --save ng-bootstrap-modal-stack
使用
步骤 1：引入 NgBootstrapModalStack
在所需的 Angular 模块中导入NgBootstrapModalStackModule。通常情况下是 app.module.ts
-- -------------------- ---- -------
------ - --------------------------- - ---- ---------------------------
-----------
-------- -
-----
-------------------------------------
--
-----
--
------ ----- --------- - -
步骤 2：修改 ngb-modal 标签
现在，您需要更改 ngb-modal 标签。添加 backdrop: 'static' ，因为我们使用了 Ng-Bootstrap Modal Stack ，它不依赖于后台背景。
-- -------------------- ---- -------
------------- ---------------------
---------- --------------------------
---------------------
------------------
------------------
----------
---- ---------------------
--- ---------------------------------------
------- ------------- ------------- ------------------ -----------------------
----- ---------------------------------
---------
------
---- -------------------
-------- ---
------
---- ---------------------
------- ------------- ---------- ------------ ---------------------------------
------- ------------- ---------- -------------- ----------------------------------
------
------------
---------------步骤 3：修复多层 Modal 嵌套问题
现在，当您在使用 ngb-modal 组件时，在多个 ngb-modal 组件嵌套打开的情况下，您将无法再次访问父组件，这是因为父组件现在位于底部，被子组件占据。 这正是 ng-bootstrap-modal-stack 包的作用。它提供了一个堆栈来解决这个问题。
创建 Modal 堆栈
首先，我们需要创建一个堆栈，来存储和管理模态框。在 app.component.ts 中添加如下代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- ------------- -
-------------------------------------------------------- -- -
------------------------
---
-
-----
-弹出 Modal
现在，通过创建的堆栈，我们可以在方法中打开模态框。调用 modalService.add 方法，方法接受模态框组件名称，传递给模态框的参数以及以下参数。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - -------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- ------------- -
-------------------------------------------------------- -- -
------------------------
---
-
----------- -
------------------------------------- - ------ ----- ------ -- - --------- ----- --------- ----- ---
-
-关闭 Modal
要关闭 Modal，调用 modalService.remove 方法
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - -------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- ------------- -
-------------------------------------------------------- -- -
------------------------
---
-
------------ -
---------------------------
-
-示例代码
这里是一个简单的示例，其中包含 ng-bootstrap-modal-stack 的所有用法。
app.module.ts
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - --------- - ---- -----------------------------
------ - --------------------------- - ---- ---------------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- --------------------
-----------
------------- -
-------------
--------------
--
-------- -
--------------
--------------------
-------------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------------
------ - -------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- ------------- -
-------------------------------------------------------- -- -
------------------------
---
-
----- - -----------------------------------
------------ - ------
----------- -
----------------- - -----
-
------------ -
----------------- - ------
-
----------------- -
------------------------------------- - ------ ------- ------ -- - --------- ----- --------- ----- ---
-
------------------ -
---------------------------
-
-
app.component.html
-- -------------------- ---- -------
---- ------------------
---------------------------- -------
------- ---------- ------------ ------------------------------------
------- ---------- ------------ -------------------------------------------
--- --
------------- ---------------------
---------- --------------------------
---------------------
------------------
------------------
----------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- ------------------ -----------------------
----- ---------------------------------
---------
------
---- -------------------
---- -- - ----- -------
------- ---------- ------------ --------------------------------- --------------
------
---- ---------------------
------- ------------- ---------- ------------ -----------------------------------
------- ------------- ---------- -------------- -------------------------------------
------
------------
---------------
---------- ------------------------------------------ - ---------------
------modal.component.ts
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------
--------- -
---- ------------- ------------- --------------
---- ------------------- --------- ----------------
---- ----------------------
---- ---------------------
--- ----------------------------------
------- ------------- ------------- -------------------- ------------------ -----------------------
----- ---------------------------------
---------
------
---- -------------------
-------- ---- ---- ---- ---------
------
---- ---------------------
------- ------------- ---------- -------------- -------------------- -------------------------------------
------
------
------
--------
--
------ ----- -------------- -
-------- ------ -------
------------ -
-- ------ --- -----
-- ---- ------ -- -------- -- --- ----- -------
-- --- ---- ------ -- ---- --- --- -- ----
---------------------------
-
------------------- ------------- ------------- - -
-总结
现在，您应该知道什么是 ng-bootstrap-modal-stack 包以及如何使用它来解决模态框嵌套问题的。使用 ng-bootstrap-modal-stack 可以使模态框堆栈更容易管理，同时解决多层模态框嵌套问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f84238a385564ab6c65