前言
在前端开发中，弹出框是一个经常使用的组件。在 Angular 应用程序中，我们可以使用 ng-modal-dialog npm 包来方便地创建弹出窗口。本文将详细介绍如何使用 ng-modal-dialog 包来实现弹出窗口的创建，并提供示例代码。
安装 ng-modal-dialog
首先，需要在项目中安装 ng-modal-dialog npm 包。可以使用以下命令：
npm install ng-modal-dialog --save
导入依赖
在需要使用弹出窗口的组件中，需要导入以下依赖：
import { Component } from '@angular/core';
import { NgbdModalComponent } from 'ng-modal-dialog'; // 导入弹出窗口组件创建弹出窗口
创建一个弹出窗口需要两个步骤：首先，定义一个模板，其中包含要在弹出窗口中显示的内容；其次，创建一个组件来控制弹出窗口的行为。
定义模板
定义模板时需要使用 ng-template 指令。具体代码如下：
-- -------------------- ---- -------
------------ -------- ------------- ----------------
---- ---------------------
--- -----------------------------
------
---- -------------------
------------------
------
---- ---------------------
------- ------------- ---------- ------------ -------------------------------
------- ------------- ---------- -------------- -------------------------------
------
--------------在模板中，ng-template 指令有一个模板变量 #content。模板中的内容将在弹出窗口中显示。其中，弹出窗口顶部是一个标题，中间是一段文字内容，底部有两个按钮，一个是“保存”，一个是“关闭”。
创建组件
定义完模板后，需要创建一个组件来控制弹出窗口的显示和行为。创建组件的代码如下：
-- -------------------- ---- -------
------------
--------- ------------
------------ ------------------------
--
------ ----- -------------- -
------------------- ------------- --------- --
------ -
----- -------- - -------------------------------------------
------------------------------- - -----
-
-在组件中，我们使用 NgbModal 服务中的 open() 方法来打开弹出窗口。在打开弹出窗口之前，需要定义一个 NgbModalRef 对象来引用弹出窗口。可以通过 modalRef.componentInstance 属性来访问弹出窗口组件。在这里，我们可以将弹出窗口组件的 name 属性设置为“世界”。
使用创建的弹出窗口
创建了弹出窗口后，可以在其他组件中使用它。只需在模板中添加一个按钮，并在 click 事件中调用模板中定义的 #content 模板变量即可。具体代码如下：
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">打开弹出窗口</button>
在 open 方法中，需要传入模板变量 content，这样就可以打开弹出窗口了。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- ----------- - ---- -----------------------------
------ - ------------------ - ---- ------------------
------------
--------- ------------
------------ ------------------------
--
------ ----- -------------- -
------------------- ------------- --------- --
------------- -
----- -------- - -------------------------------------------
------------------------------- - -----
-
--- -------------------- ---- -------
------- ---------- ------ -------------------- ---------------------------------------
------------ -------- ------------- ----------------
---- ---------------------
--- -----------------------------
------
---- -------------------
------------------
------
---- ---------------------
------- ------------- ---------- ------------ -------------------------------
------- ------------- ---------- -------------- -------------------------------
------
--------------结语
以上就是关于使用 ng-modal-dialog npm 包创建弹出窗口的教程。使用 ng-modal-dialog 可以轻松地创建可复用的弹出窗口组件，方便快捷地实现弹出窗口效果。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005572e81e8991b448d4212