介绍
单页应用在现代 Web 应用开发中越来越普遍，多数情况下需要在页面上弹出各种模态框。模态框是一个弹出的窗口，它会覆盖在当前网页之上并禁用背景区域的交互。
angular-modal 是一个可复用的模态框组件，它提供了完全的 TypeScript 类型定义。通过安装 @types/angular-modal 包，我们可以获得完全的自动化类型检查和代码提示。
本文将介绍如何在 Angular 项目中使用 @types/angular-modal。
安装
首先，使用 npm 安装 angular-modal 和 @types/angular-modal：
npm install angular-modal @types/angular-modal
使用
导入
在需要使用 angular-modal 的组件中，导入 AngularModalModule：
-- -------------------- ---- -------
------ - ------------------ - ---- ----------------
-----------
-------- -
-----------------------------
-- ---
--
-- ---
--
------ ----- --------- - -forRoot 方法表示模块将作为应用程序的根模块使用。如果是在子模块中使用，则应该调用 forChild 方法。这两个方法都返回一个 Angular 模块，你应该将它们添加到相应的地方。
配置
在组件中，你可以通过 AngularModalService 服务实例化模态框。通过 import { AngularModalService } from 'angular-modal' 引入它。
模态框
使用 AngularModalService 服务来创建一个简单的模态框：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- ----------------
------------
--------- -------------
--------- -
------- -------------------------- --------------
--
--
------ ----- --------------- -
------------------- ------------- -------------------- - -
----------- -
----- -------- - --------------------------
-- ---
---
----------------
-
-在这个示例中，create 方法接收一个选项对象，用于定义模态框的内容、尺寸、关闭方式等配置。然后，使用 show 方法来显示这个模态框。
对话框
AngularModalService 服务还可以用于创建一个对话框：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- ----------------
------------
--------- -------------
--------- -
------- --------------------------- ---------------
--
--
------ ----- --------------- -
------------------- ------------- -------------------- - -
------------ -
----- --------- - --------------------------------
-- ---
---
---------------------------------- -- -
-------------------- -- -----
---
-----------------
-
-可以使用 createDialog 方法来创建一个对话框。onClose 事件是一个 Subject 类型，用于在对话框关闭时发出通知。如果仅仅需要一个返回值，你可以调用 toPromise 方法将其转化为一个 Promise。将对话框实例作为返回值返回，以便可以在窗口之外关闭这个对话框。
配置选项
通过在 create 或 createDialog 方法中提供一个选项对象，可以进行自定义配置。以下是可用的选项：
关闭方式
模态框可以有不同的关闭方式。
- 值
0：默认行为是在单击模态框外部时自动关闭。 - 值
1：在“Esc”键或单击模态框外部时关闭。
const modalRef = this.modalService.create({
// ...
autoClose: 0, //自动关闭
});动画
通过以下属性，可以自定义模态框的动画效果。
openAnimation：打开动画的类名。closeAnimation：关闭动画的类名。
const modalRef = this.modalService.create({
// ...
openAnimation: 'custom-animation-open', //自定义打开动画
closeAnimation: 'custom-animation-close', //自定义关闭动画
});显示位置
通过以下属性，可以自定义模态框的位置。
position：一个字符串，可以是'center'或'top'。top：一个字符串，例如'50px'。
const modalRef = this.modalService.create({
// ...
position: 'center', //显示在中心
top: '50px', //距离顶部 50px
});大小
通过以下属性，可以自定义模态框的大小。
width：模态框的宽度值。height：模态框的高度值。
const modalRef = this.modalService.create({
// ...
width: '500px', //宽度 500px
height: '80%', //高度 80%
});内容
通过以下属性，可以自定义模态框的内容。
component：一个组件类型，用于渲染模态框。data：传递给组件的数据。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------------
--------- -
---------- -- ---- --------
--
--
------ ----- --------------------- -
------------------- ----- ---- - -
--- ------- ------ -
------ ---------------
-
-
----- -------- - --------------------------
-- ---
---------- ----------------------
----- - ----- ------- --
---示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- ----------------
------------
--------- -------------
--------- -
------- -------------------------- --------------
--
--
------ ----- --------------- -
------------------- ------------- -------------------- - -
----------- -
----- -------- - --------------------------
---------- ----------------------
----- - ----- ------ ---- ------- --
------ --------
------- -------
--------- ---------
-------------- ------------------------------
--------------- -------------------------------
---------- --
---
----------------
-
-
------------
--------- --------------------
--------- -
---------- -- ---- --------
--
--
------ ----- --------------------- -
------------------- ----- ---- - -
--- ------- ------ -
------ ---------------
-
-总结
在本文中，我们介绍了如何使用 @types/angular-modal 包。通过 AngularModalService 服务创建模态框和对话框，并使用选项对象为其提供自定义配置。这个包提供了完全的 TypeScript 类型定义，为 Angular 应用程序添加了类型检查和代码提示。希望这篇使用教程可以帮助你顺利地开始使用 angular-modal。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc153b5cbfe1ea0611d70