在前端开发中，我们有时需要在 Angular 应用中创建可弹出窗口的功能。而 npm 包 angular2-windows 正是为方便实现该功能而开发的。本文将介绍如何安装和使用该 npm 包，并提供使用示例代码。
1. 安装
首先，我们需要在 Angular 项目中安装 angular2-windows。运行以下命令：
--- ------- ---------------- ------
该命令将下载最新版本的 angular2-windows 并将其添加到项目的 dependencies 中。
2. 使用
接下来，在需要使用弹窗功能的组件的模块中引入 angular2-windows，并将其注入组件的构造函数中。例如：
------ - --------- - ---- ---------------- ------ - ------------- - ---- ------------------- ------------ -- ---------- -- ------ ----- ----------- - ------------------- -------------- -------------- -- -
在构造函数中，我们通过将 WindowService 类注入组件中来获得弹窗的功能。
如果需要创建一个弹窗，可以使用 WindowService 的 open 方法。该方法调用后会返回一个 WindowRef 对象，你可以设置该对象的大小、位置、背景色、内容等属性。例如：
----- --------- - -------------------------
------ --------
------- --------
---- --------
----- --------
---------------- -------
-------- -
---------------
----------------
------- ---------------------------------------
-
---上面的示例中，我们创建了一个大小为 500px × 400px、位于 (100px, 100px) 的位置、白色背景的弹窗，内容为一段 HTML 代码。
如果需要关闭弹窗，可以在弹窗的 HTML 代码中添加一个按钮，并在点击该按钮时调用 WindowRef 的 close 方法，如上面示例代码所示。
3. 示例代码
下面是一个完整的使用示例代码：
------ - --------- - ---- ----------------
------ - -------------- --------- - ---- -------------------
------------
--------- -------------------
--------- -
------- ------------------------------------
-
--
------ ----- ----------- -
------------------- -------------- -------------- --
------------ -
----- --------- - -------------------------
------ --------
------- --------
---- --------
----- --------
---------------- -------
-------- -
---------------
----------------
------- ---------------------------------------
-
---
-
-以上就是 angular2-windows 的简单使用教程。希望对你在开发中实现弹窗功能有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005668481e8991b448e2aee