如果你正在开发一个 Angular 应用程序，同时需要使用模态框功能，那么 tmj-angular-modal 这个 npm 包就非常适合你。本文将介绍如何使用 tmj-angular-modal 包创建模态框。
安装 tmj-angular-modal 包
首先，你需要使用 npm 安装 tmj-angular-modal 包。 打开终端并运行以下命令进行安装：
npm install tmj-angular-modal --save
引入模块
接下来，将模块引入到你的 Angular 模块中。
import { TmjAngularModalModule } from 'tmj-angular-modal';
@NgModule({
declarations: [ AppComponent ],
imports: [ TmjAngularModalModule ],
bootstrap: [ AppComponent ]
})
export class AppModule {}创建模态框
创建模态框需要模态框服务和模态框组件。
在模态框组件中定义模态框内容
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- --------------------
------------
--------- --------------------
--------- -------- ------- ---------
--
------ ----- --------------------- -
------ -------- -------
------------------- ------------ -
------------ - --------------------
-
-在组件中调用模态框服务
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- --------------------
------ - --------------------- - ---- ----------------------------
------------
--------- -----------
--------- -------- -------------------------------------
--
------ ----- ------------ -
------------------- ------------- ------------- --
------ ----------- -
----- ------- - ----------
----- -------- - --------------------------------------------- - -------- ------- ---
-
-模态框配置参数
tmj-angular-modal 提供了一系列可配置的参数：
- data - 传递给模态框的数据
- title - 模态框的标题
- size - 模态框的大小
- centered - 模态框是否居中
- animation - 自定义动画名称，默认为
"fade" - backdrop - 是否显示背景遮罩
- backdropClass - 定义背景遮罩的样式
在打开模态框时，您可以传递这些参数。
-- -------------------- ---- -------
----- -------- - ------------------------------------- -
----- -
--- --
--
------ --------
----- -----
--------- -----
---------- --------
--------- ------
-------------- -------------
---在 moddal-content 中，已通过 ModalConfig 注入了 data 属性。您可以通过访问 config.data 来获取传递给模态框的数据。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- -------------------- ------------ --------- ------------ --------- -------- -------------- --------- -- ------ ----- -------------- - ------------------ ------- ------------ - - -
关闭模态框
您有两种方法可以关闭模态框。
通过 ModalRef 关闭
你可以通过 modalRef 对象关闭模态框：
const modalRef = this.modalService.open(ModalContentComponent, { message: 'Hello World!' });
modalRef.close();通过模态框组件完成
您可以通过向模态框组件注入 ModalService 实例，然后调用 ModalService 的 dismiss() 方法来关闭模态框：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- --------------------
------------
--------- ------------
--------- -------- --------------------------------------
--
------ ----- -------------- -
------------------- ------------- ------------- - -
------ ------------ -
----------------------------
-
-总结
tmj-angular-modal 包提供了一种创建 Angular 应用程序中的模态框的简便方法。可以轻松创建、定制和关闭模态框。希望这篇文章对你有所帮助，欢迎使用 tmj-angular-modal 包，制作优美的界面。
示例代码已经放在 GitHub 上，所有你可以自己下载使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb781e8991b448da3c5