在 Angular 应用中使用模态框可以方便地提示用户信息或执行某些任务。而 npm 包 angular-basic-modal 是一个可重复使用的 Angular 组件，用于创建基本的模态框。这篇文章将向你展示如何使用它们，包括创建和使用模态框组件、定义子组件以及添加自己的样式。
环境
本文使用的 Angular 版本为 9，但是使用最新版本也能进行前端开发。
安装
使用 npm 安装 angular-basic-modal：
--- ------- -------------------
使用
安装完成后，引入 modal 模块：
------ - ----------- - ---- ----------------------
-----------
-------- -
-----------
-
--现在，你可以在需要的组件中使用 app-modal 标记：
----------- --------- ---------- ------------
这会在页面中为你创建一个简单的模态框，包含标在 app-modal 元素内的内容。
传入数据
你可以通过 options 属性将一个 JavaScript 对象传递给模态框组件：
------ - ------------ - ---- ---------------------- ----- -------- ------------ - - ------ --- ----- ------- ------- ---- -- ---------- -------------------- --------- ---------- ------------
这个示例显示了在模态框的标题栏中显示自定义文本，并显示模态框的底部。这两个都是非默认（默认情况下，标题栏不显示，底部显示按钮组）。
可重复使用
通常情况下，我们需要展现不同的内容在模态框中，为此，我们需要创建模态框组件。首先，你需要使用 CLI 工具或手动创建一个新组件：
-- -------- --------- --------
然后，在 MyModalComponent 中使用 ModalService 注入 modalService，实现创建模态框的方法：
------ - --------- - ---- ----------------
------ - ------------ - ---- ----------------------
------------
--------- ---------------
--------- -
--------- ----------
-
--
------ ----- ---------------- -
------------------- ------------- ------------- --
----------- -
------------------------
---------- -----------------
------ --- ----- ------
---
-
-在这个例子中，我们使用 show() 方法打开模态框，将当前组件传递给 component 属性，将标题设置为“我的模态框”。
添加样式
要使模态框看起来更好，你可能需要添加一些自己的样式。你可以通过重写 .modal-header、.modal-body 和 .modal-footer CSS 类来改变标题、内容和底部。
------------- - ----------------- ----- - ----------- - -------- ----- - ------------- - ----------------- ----- -
现在你知道了如何使用 angular-basic-modal 来创建、使用和样式化模态框。从基本到更高级的用法，都应该能在这篇文章中找到。如果你想更深入地了解如何使用模态框，可以参考官方文档或实战演习。
示例代码
在本文中使用到的所有示例代码都可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e181e8991b448d76ab