Ionic Popover (弹出框)

Popover 是一个小的覆盖层，出现在当前页面之上以显示附加信息。 您可以将它用于任何事情，但它通常用于不适合导航栏的附加操作。 它允许我们非常容易地呈现或收集用户的信息。 它通常用于以下情况。

• 它显示有关当前视图的附加信息。
• 您可以选择常用的工具和配置。
• 它提供了在当前视图中执行的操作列表。

Popover 控制器

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

Present () 方法

present() 方法用于在 popover 实例上呈现 popover 通知。 需要在 present() 方法中传递一个点击事件来定位 popover。 如果您没有传递事件，popover 将位于视图的中心。

让我们逐步了解如何将数据从页面传递到 popover 组件。

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

步骤 2： 创建一个 popover 自定义组件。 不需要创建页面，因为创建组件的目的是仅列出新消息的通知。 为此，请运行以下命令。

步骤 3： 创建通知组件后，打开以下文件，然后插入给定的代码。 您可以根据需要更改代码。

notifications.component.scss

notifications.component.html

步骤 4： 接下来，在创建 notifications 组件之后，配置 app.module.ts 文件。 在这里，您需要 导入 notifications 组件，然后将其添加到 @NgModule 中。

步骤 5： 打开 home.page.ts 文件并添加以下代码。 在此文件中，我们可以将数据从主页传递到 popover 组件。

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

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

在上面的屏幕中，单击 显示 通知按钮，以下屏幕将出现在您的浏览器中。 在这里，您可以看到 popover 通知。