在 中使用模式对话框相当常见。无论您是想在不导航到其他页面的情况下编辑表中的记录、查找某些数据，还是只是向用户显示警告消息，使用模式对话框都可能是一种很好的用户体验。不幸的是，如果没有第三方库，在 中做到这一点并不容易。它需要编写一些不平凡的代码并了解 Angular 框架的内部机制。这就是我们在开发合作伙伴开发一个库来在 Angular 中显示模式对话框的原因。我们将在本文中使用我们的库。 Web 应用程序 Angular  1.安装库 我们必须通过 NPM 安装 库，并将其包含在我们的 Angular 模块中才能使用它。这是安装它的 NPM 命令： @developer-partners/ngx-modal-  dialog   npm install @developer-partners/ngx-modal-dialog 接下来，我们必须将其包含在必须使用模式对话框的 Angular 模块中。我们的演示应用程序非常小，它只有一个名为 AppModule 的模块。我们必须将库中的 ModalModule 包含在 AppModule Angular 模块的导入数组中：  我们都准备好了。我们可以开始在我们的应用程序中使用模式对话框组件。  2. 显示模态对话框 如前所述，当我们想要在图书列表中添加或编辑一本书时，我们将显示模式对话框。让我们首先创建一个组件，我们将在其中显示书籍列表。我们将创建一个新的 Angular 组件并将其命名为  。 BookListComponent 这是  Typescript 类的内容：  BookListComponent 为了简单起见，我们的 类使用硬编码的书籍列表作为在表中显示的数据。它还需要 ngx-modal-dialog 库中的  Angular 服务才能显示模式对话框，这就是我们将其注入构造函数的原因。 BookListComponent ModalService 接下来，我们将为 创建 HTML 文件，其中我们将在 HTML 表格中显示图书列表：  BookListComponent 上面的 HTML 代码非常简单。它在表格中显示书籍列表。它还有一个名为“添加新书”的按钮。 到目前为止，用户界面如下所示：  单击“添加新书”按钮时，它会调用 Typescript 类中的 函数。  函数显示了用于向表中添加新书的模式对话框。这是 函数的 Typescript 代码：  createBook createBook createBook   函数通过调用 类的 函数来显示模式对话框。  函数有 2 个参数：要在模式对话框内显示的 Angular 组件的类和模式对话框的选项，这些选项是对话框的设置，例如标题、大小、位置和其他一些内容。模式对话框需要一个 Angular 组件才能在其主体中显示。如果没有该组件，我们的模式对话框将只是一个覆盖屏幕的空面板。该组件是  ，它是上面屏幕截图中 函数的第一个参数。 createBook ModalService show show CreateEditBookComponent show    Angular 组件将负责添加和编辑书籍。我们将从编写添加新书的代码开始。下面是 CreateEditBookComponent 的 HTML 代码，它只有几个字段用于输入我们要创建的图书的 ID 和标题，并具有用于关闭对话框和保存数据的按钮：  CreateEditBookComponent 模式对话框 UI 如下所示：  以下是 CreateEditBookComponent 组件的 Typescript 代码：    组件使用一个名为 的 Angular 服务，该服务来自 图书馆。我们使用该服务与放置组件的模式对话框进行交互，例如关闭模式或订阅其事件。我们只需在上面的屏幕截图中的 函数中关闭模式对话框即可。当单击 HTML 中的“取消”按钮时，我们调用 函数。当我们单击 HTML 代码中的“保存”按钮时，它会提交调用 函数的表单。在 函数中，我们像在 函数中一样关闭模式对话框，但我们还将 属性传递给它，其中包含用于将新书添加到列表中的数据。 CreateEditBookComponent ModalReference ngx-模态对话框 取消 取消 saveData saveData 取消 book   服务是一个通用类型。当我们调用 服务的 函数时，我们必须传递一个相同类型的对象作为其泛型参数。在我们的例子中，它是一个名为 的 Typescript 接口。我们传递给 函数的参数会通过调用 类的 函数传递回创建模式对话框的组件。  ModalReference ModalReference closeSuccess Book closeSuccess ModalService show 当调用 ModalReference 服务的 closeSuccess 函数时，它会关闭模式对话框并触发 RxJS 事件，将新创建的书籍传递给该事件的订阅者。在上面的屏幕截图中，回调函数的 参数是我们从模式对话框接收到的新创建的书籍，因此我们只需将其添加到 数组中即可在 UI 中显示它。 newBook 书籍  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 中创建加载旋转器

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Learn More

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

成功云迁移的完整指南：策略和最佳实践

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

如何将您的工作流程提高 10 倍：17 个必备应用程序

成功云迁移的完整指南：策略和最佳实践

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

如何将您的工作流程提高 10 倍：17 个必备应用程序

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps