如何在 Angular 中显示模态对话框

在Web 应用程序中使用模式对话框相当常见。无论您是想在不导航到其他页面的情况下编辑表中的记录、查找某些数据，还是只是向用户显示警告消息，使用模式对话框都可能是一种很好的用户体验。不幸的是，如果没有第三方库，在Angular中做到这一点并不容易。它需要编写一些不平凡的代码并了解 Angular 框架的内部机制。这就是我们在开发合作伙伴开发一个库来在 Angular 中显示模式对话框的原因。我们将在本文中使用我们的库。

1.安装库

我们必须通过 NPM 安装@developer-partners/ngx-modal- dialog库，并将其包含在我们的 Angular 模块中才能使用它。这是安装它的 NPM 命令：

npm install @developer-partners/ngx-modal-dialog

接下来，我们必须将其包含在必须使用模式对话框的 Angular 模块中。我们的演示应用程序非常小，它只有一个名为 AppModule 的模块。我们必须将库中的 ModalModule 包含在 AppModule Angular 模块的导入数组中：

我们都准备好了。我们可以开始在我们的应用程序中使用模式对话框组件。

2. 显示模态对话框

如前所述，当我们想要在图书列表中添加或编辑一本书时，我们将显示模式对话框。让我们首先创建一个组件，我们将在其中显示书籍列表。我们将创建一个新的 Angular 组件并将其命名为BookListComponent 。

这是BookListComponent Typescript 类的内容：

为了简单起见，我们的BookListComponent类使用硬编码的书籍列表作为在表中显示的数据。它还需要 ngx-modal-dialog 库中的ModalService Angular 服务才能显示模式对话框，这就是我们将其注入构造函数的原因。

接下来，我们将为BookListComponent创建 HTML 文件，其中我们将在 HTML 表格中显示图书列表：

上面的 HTML 代码非常简单。它在表格中显示书籍列表。它还有一个名为“添加新书”的按钮。

到目前为止，用户界面如下所示：

单击“添加新书”按钮时，它会调用 Typescript 类中的createBook函数。 createBook函数显示了用于向表中添加新书的模式对话框。这是createBook函数的 Typescript 代码：

createBook函数通过调用ModalService类的show函数来显示模式对话框。 show函数有 2 个参数：要在模式对话框内显示的 Angular 组件的类和模式对话框的选项，这些选项是对话框的设置，例如标题、大小、位置和其他一些内容。模式对话框需要一个 Angular 组件才能在其主体中显示。如果没有该组件，我们的模式对话框将只是一个覆盖屏幕的空面板。该组件是CreateEditBookComponent ，它是上面屏幕截图中show函数的第一个参数。

CreateEditBookComponent Angular 组件将负责添加和编辑书籍。我们将从编写添加新书的代码开始。下面是 CreateEditBookComponent 的 HTML 代码，它只有几个字段用于输入我们要创建的图书的 ID 和标题，并具有用于关闭对话框和保存数据的按钮：

模式对话框 UI 如下所示：

以下是 CreateEditBookComponent 组件的 Typescript 代码：

CreateEditBookComponent组件使用一个名为ModalReference的 Angular 服务，该服务来自ngx-模态对话框图书馆。我们使用该服务与放置组件的模式对话框进行交互，例如关闭模式或订阅其事件。我们只需在上面的屏幕截图中的取消函数中关闭模式对话框即可。当单击 HTML 中的“取消”按钮时，我们调用取消函数。当我们单击 HTML 代码中的“保存”按钮时，它会提交调用saveData函数的表单。在saveData函数中，我们像在取消函数中一样关闭模式对话框，但我们还将book属性传递给它，其中包含用于将新书添加到列表中的数据。

ModalReference服务是一个通用类型。当我们调用ModalReference服务的closeSuccess函数时，我们必须传递一个相同类型的对象作为其泛型参数。在我们的例子中，它是一个名为Book的 Typescript 接口。我们传递给closeSuccess函数的参数会通过调用ModalService类的show函数传递回创建模式对话框的组件。

当调用 ModalReference 服务的 closeSuccess 函数时，它会关闭模式对话框并触发 RxJS 事件，将新创建的书籍传递给该事件的订阅者。在上面的屏幕截图中，回调函数的newBook参数是我们从模式对话框接收到的新创建的书籍，因此我们只需将其添加到书籍数组中即可在 UI 中显示它。

3. 将数据传递到模态对话框

在某些情况下，您需要将一些数据传递到模式对话框。例如，如果我们要编辑列表中的一本书，我们可以将要编辑的书籍记录传递到模式对话框中，以获得我们要修改的初始数据。

让我们首先向表行添加一个按钮以编辑行数据：

表格每行中都有“编辑”按钮的 UI 如下所示：

editBook函数的代码与createBook函数几乎相同，只有一个重要的区别。它通过使用对话框选项的model属性将我们想要编辑的书籍传递到模式对话框。

我们使用model属性传递给模态对话框的参数通过其config.model属性在对话框内使用的组件的ModalReference服务中可用。

在上面的屏幕截图中，我们复制传递的参数并将其分配给CreateEditBookComponent组件的book属性。 ModalReference.config对象的model属性是通过引用传递的，因此我们对该对象的属性所做的任何更改都将反映在我们显示书籍列表的表中。我们复制它的原因是为了在用户单击“保存”按钮之前不修改表中的行。如果用户点击“取消”按钮，表数据将不会被更新。

这是“编辑书籍”模式对话框的样子：

结论

从头开始为 Angular 构建模式对话框并不容易，但使用我们的模式对话框库会容易得多。我们了解了如何设置该库并使用它在项目中显示模式对话框。我们介绍了对话框的最基本用例和功能，但 @developer-partners/ngx-modal-dialog 库还有许多其他功能，您可能会发现这些功能在实际项目中很有用。

请点击以下链接了解更多信息：

@developer-partners/ngx-modal-dialog

如果您想在模式对话框中显示一个漂亮的加载微调器，请参阅我们关于在 Angular 中构建加载微调器的文章：

如何在 Angular 中创建加载旋转器