ionic中的ToastController小弹窗用法。提示信息。toast长时间不消失解决方案

学习笔记：有理解有翻译

ToastController

1.Toast 是现代应用中常用的微妙通知。 它可用于提供有关操作的反馈或显示系统消息。 应用程式的内容会显示Toast ，应用程式可以将其关闭，以恢复使用者与应用程式的互动。

Creating-创建

所有的toast选项都应该在create方法的第一个参数中传递：create（opts）。 要显示的消息应在消息属性中传递。 showCloseButton选项可以设置为true，以便在toast(提示框)上显示一个关闭按钮。 有关所有可用选项，请参阅下面的create方法。

Positioning-定位

 toast可以定位在视图端口的顶部，底部或中间top, bottom and middle。 该位置可以传递给Toast.create（opts）方法。 position选项是一个字符串，接受的值是顶部，底部和中间。 如果未指定位置，则会在视图端口的底部显示toast。

Dismissing驳回销毁

   在特定时间之后，toast可以通过传送毫秒数来在toast选项的持续时间内自动关闭。 如果showCloseButton设置为true，那么关闭按钮将关闭toast。 要在创建后关闭toast，请在Toast实例上调用dismiss（）方法。 可以调用onDidDismiss函数来在Toast被关闭之后执行一个操作。

Usage-用法

import { ToastController } from 'ionic-angular';constructor(private toastCtrl: ToastController) {}presentToast() {  let toast = this.toastCtrl.create({    message: '某个特定的时间弹出，比如密码错误的时候弹出',    duration: 3000,//3秒后自动消失    position: 'top'//位置
    showCloseButton:true,
    closeButtonText:"关闭"
  });  toast.onDidDismiss(() => {    console.log('toast被关闭之后执行');  });  toast.present();//符合触发条件后立即执行显示。一定不能忘了这个}

效果：

注意：当快速点击，或者操作过快湖出现这个问题，原因是触发弹框后，弹框的hide()方法还没有触发，触发的弹框的事件已经关闭就会造成弹框的hide（）方法无法触发

解决方法是：加个关闭按钮，出现这种情况的时候手动关闭

在使用的时候一个页面往往需要多个toast,这个时候可以将创建toast的方法封装，然后去调用就好了

例如：

封装：

private popToastView(message: string, duration: number) {  this.toastController.create({    message: message,    position: 'middle',    duration: duration,    showCloseButton:true,    closeButtonText:"关闭"  }).present();}

调用：

this.popToastView("手机号不能为空",2000);

Instance Members-实例成员

create(opts)

Create a new toast component. See options below

ParamTypeDetailsoptsToastOptions

Toast options. See the below table for available options.

属性类型默认值说明messagestring-toast的信息。 长串将包裹，toast容器将展开。durationnumber-在隐藏toast之前等待几秒。默认情况下，将会在dismiss()方法被调用的时候关闭positionstring"bottom" toast 在屏幕上的位置接受三个参数值  values: "top", "middle", "bottom".cssClassstring-自定义样式类showCloseButtonbooleanfalse是否需要一个button 去关闭 toast.closeButtonTextstring"Close"关闭按钮上显示的文字dismissOnPageChangebooleanfalse是否在导航到新页面时销毁toast