Ionic 2 toast 没有在页面上关闭答案

【问题标题】：Ionic 2 toast doesn't close on pageIonic 2 toast 没有在页面上关闭
【发布时间】：2018-01-16 13:56:03
【问题描述】：

我使用吐司，但如果我同时打开 2 个以上吐司，吐司不会关闭。

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

【问题讨论】：

请显示您的整个 .ts 页面。我认为你创造了不定式吐司。我在我的项目中同时使用 2 个以上的标签进行了测试，但它们实际上被解雇了。

标签： ionic-framework ionic2

【解决方案1】：

保留对您的祝酒词的引用，并在展示前致电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();
    }
}

【讨论】：

服务不应用于 UI 交互。请参阅here 了解替代解决方案。