Ionic Toast _IonicToast

本文概述

Toast控制器
定位

Toast是现代应用程序中常用的一种通知。你可以使用它来显示系统消息, 也可以使用它来提供有关操作的反馈。Toast通知显示在应用程序内容的顶部。该应用可以将其关闭, 以恢复用户与该应用的交互。
Toast控制器 Toast控制器是一个组件, 用于创建Toast组件。 Toast控制器使用两种方法来创建Toast通知。这些方法是：

创建
解雇

创建
它用于创建Toast覆盖层。所有的Toast选项都应在create方法内传递。用于显示消息的message属性。如果要在烤面包上显示关闭按钮, 请将showCloseButton选项设置为true。
例
以下示例使用Toast控制器方法create()来显示Toast通知。在HTML文件中, 按钮组件调用openToast()函数以显示Toast通知。函数的逻辑在应用程序的ts文件中创建。 openToast()函数还包含属性的消息和持续时间。 message属性将显示通知消息, duration属性会在指定时间后取消通知。
Home.page.html

< ion-header> < ion-toolbar color="light"> < ion-title> Ionic Toast< /ion-title> < /ion-toolbar> < /ion-header> < ion-content fullscreen class="ion-padding"> < h1> Toast Notification< /h1> < br> < ion-button (click)="openToast()" expand="block"> Show Toast< /ion-button> < /ion-content>

Home.page.ts

import { Component } from '@angular/core'; import { ToastController } from '@ionic/angular'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(public toastCtrl: ToastController) { }async openToast() { const toast = await this.toastCtrl.create({ message: 'It is a Toast Notification', duration: 5000 }); toast.present(); } }

输出：
当你执行该应用程序时, 它将给出以下输出。

文章图片
现在, 单击Show Toast按钮, 你将收到通知消息。五秒钟后, 通知消息消失。

文章图片
解雇
可以通过设置在Toast选项的持续时间内显示的毫秒数, 在指定的时间后自动关闭Toast通知。如果将“ showCloseButton”设置为true, 则关闭按钮将关闭Toast。如果要在创建后消除烤面包, 请调用dismiss()方法。
例
Home.page.ts
在此文件中, 我们将使用dismiss方法。单击“隐藏”按钮后, dismiss方法将消失Toast通知。

import { Component } from '@angular/core'; import { ToastController } from '@ionic/angular'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(public toastCtrl: ToastController) { }async openToast() { const toast = await this.toastCtrl.create({ message: 'It is a Toast Notification', showCloseButton: true, closeButtonText: 'hide', }); toast.present(); toast.onDidDismiss().then((val) => { console.log('Toast Dismissed'); }); } }

输出：
【Ionic Toast】当你执行上面的Ionic应用程序时, 它将提供以下输出。现在, 单击Show Toast按钮, 通知消息将显示在底部。单击“隐藏”按钮, Toast通知将消失, 并且控制台中显示相应的消息。

文章图片

文章图片
定位你可以将Toast通知放置在视口的顶部, 底部, 中间。位置属性的值可以在create方法内设置。位置值是上, 下和中。默认情况下, 祝酒通知的位置显示在视口的底部。
例
在下面的示例中, 我们将看到位置属性的使用。在此, Toast通知的位置设置在中间。

import { Component } from '@angular/core'; import { ToastController } from '@ionic/angular'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(public toastCtrl: ToastController) { }async openToast() { const toast = await this.toastCtrl.create({ message: 'It is a Toast Notification', animated: false, showCloseButton: true, closeButtonText: 'hide', position: 'middle', }); toast.present(); toast.onDidDismiss().then((val) => { console.log('Toast Dismissed'); }); } }

输出：
当你运行上述代码片段时, 将获得输出。接下来, 单击按钮, 你将获得以下屏幕。在这里, 你可以看到烤面包通知显示在中间。