Ionic 2 toast在页面上不会关闭

时间:2017-08-08 20:46:37

标签: ionic-framework ionic2

我使用吐司但是如果我同时打开2个以上的祝酒词,那么祝酒词就不会关闭。

let toast = this.toastCtrl.create({
      message: 'İnternet bağlantınızda veya sunucuda sorun olabilir.',
      duration: 3000,
      position: 'bottom'
});
toast.present();

1 个答案:

答案 0 :(得分:3)

保留对吐司的引用,并在呈现前致电dismiss()。此解决方案可以防止您同时出现多个Toast

我喜欢自己使用的解决方案是处理服务中的所有Toast交互。并将该服务注入您需要的任何组件/页面/服务。

ToastService:

import { Injectable } from '@angular/core';
import { ToastController, Toast } from 'ionic-angular';

@Injectable()
export class ToastService{
    toast: Toast = null;

    constructor(private toastCtrl: ToastController){ }

    presentToast(text:string):void{
        let toastData = {
            message: text,
            duration: 3000,
            position: 'top'
        }

        this.showToast(toastData);
    }

    presentClosableToast(text:string):void{
        let toastData = {
            message: text,
            showCloseButton: true,
            closeButtonText: 'X',
            position: 'top' 
        };

        this.showToast(toastData);
    }

    private showToast(data:any):void{
        this.toast ? this.toast.dismiss() : false;
        this.toast = this.toastCtrl.create(data);
        this.toast.present();
    }
}