Ionic 模态框

Ionic 中的模态框显示为滑入屏幕的临时 UI。它出现在应用程序内容之上，并且在恢复交互之前必须由应用程序关闭。它主要用于登录/注册页面、撰写消息、过滤列表中的项目或呈现应用程序配置选项。

模态控制器

它负责在 Ionic 应用程序中创建模态框。它使用 create() 方法创建模态框。您可以通过在 create 方法中设置模态选项来自定义控制器。

关闭方法

创建模态框后，您可以通过在模态控制器上调用 dismiss() 方法来关闭它。可以调用 onDidDismiss 函数以在关闭模态框后执行其他操作。

让我们逐步了解模态控制器在 Ionic 应用程序中的工作原理。

步骤 1： 创建一个 新项目。您可以从 此处 了解如何在 Ionic 4 中创建项目。

步骤 2：为模态控制器创建一个新页面。为此，请运行以下命令。

步骤 3：创建模态页面后，打开以下文件，然后插入给定的代码。您可以根据需要修改代码。

Modal.page.html

在这里，我们将调用 dismiss 方法并添加在模态 UI 中显示的内容。

Modal.page.ts

在此文件中，我们必须创建一个 dismiss 方法来关闭模态 UI。

Modal.module.ts

步骤 4：接下来，配置 app.module.ts 文件。它负责应用程序中模态页面的条目。 在这里，您需要 import 模态页面，然后将其添加到 @NgModule 中。

步骤 5：打开 home.page.ts 文件并添加以下代码。在此文件中，showModal() 函数用于创建模态控制器。 在这里，您还可以使用 componentProps 选项传递数据。

步骤 6：打开 home.page.html 文件并添加以下代码。

步骤 7：现在，运行应用程序，您将获得以下屏幕。

在上面的屏幕中，单击显示按钮，以下屏幕将出现在您的浏览器中。在这里，您可以将模态页面内容视为临时 UI。可以通过单击关闭图标来关闭它。