Ionic Alert (警告框)

提示框是一种对话框，它会通知用户重要信息，以便做出决定或提供选择特定操作或操作列表的能力。 它显示在应用程序内容之上。 用户可以在与应用程序交互之前手动关闭它。 它还可以包括标题、副标题和消息选项。

提示框可以被认为是浮动模态框，应该用于快速响应，例如密码验证、小型应用程序通知等等。 提示框非常灵活，可以非常容易地进行自定义。

提示框控制器

提示框控制器负责在 Ionic 应用程序中创建提示框。 它使用 create() 方法创建提示框，并且可以通过在 create() 方法中传递提示框选项进行自定义。

提示框可以分为多种类型，如下所示。

1. 基本提示框

这些类型的提示框用于通知用户有关新信息。 这些信息有不同的类型，例如应用程序的更改、关于新功能、需要确认的紧急情况，或者作为用户确认操作成功与否的通知。 以下示例解释了基本提示框的用法。

示例

在这个 typescript 文件中，我们需要首先导入提示框控制器。 然后，创建一个 showAlert() 函数，其中包含提示框选项，例如标题、副标题、消息和按钮。 之后，我们创建一个 onDidDismiss() 方法以恢复与应用程序的交互。

Home.page.ts

Home.page.html

在这个文件中，我们将创建一个按钮。 当我们按下按钮时，它将调用 showAlert() 函数。 showAlert() 函数的实现定义在 home.page.ts 文件中。

输出

运行应用程序时，它将显示以下屏幕。 当您单击按钮时，您将立即获得提示消息。 现在，单击确定按钮，提示消息将消失。

2. 多按钮提示框

这种类型的提示框用于提供多个提示框按钮。 它类似于基本提示框类型，除了它包含多个 按钮 而不是单个按钮。 在这里，最右边的按钮用作主要按钮。

示例

Home.page.ts

Home.page.html

输出

运行应用程序时，您将获得以下输出。

3. 提示输入提示框

提示输入提示框用于输入数据或信息。 有时，我们可以在应用程序中前进之前使用它来询问用户的密码。 以下示例更清楚地解释了这一点。

示例

Home.page.ts

Home.page.html

输出

4. 确认提示框

这些类型的提示框用于在应用程序中前进之前确认特定选择。 例如，当用户要从通讯簿中删除或移除联系人时，需要它。

示例

Home.page.ts

Home.page.html

输出

5. 单选提示框

单选提示框类似于确认提示框，但建议使用 单选按钮 组件代替它。 这种类型的提示框向用户提供一组选项，其中只能选择一个选项。

示例

Home.page.ts

Home.page.html

输出

6. 复选框提示框

复选框提示框类似于确认提示框，但建议使用 复选框 组件代替它。 这种类型的提示框向用户提供一组多个选项，用户可以在其中选择他们自己的选项。

示例

Home.page.ts

Home.page.html

输出