将Ionic ToastController导入TS类

时间:2018-08-11 13:51:34

标签: typescript class ionic-framework ionic3

我不知道我想做的事是否可行甚至明智。我正在做一个Ionic 3项目,我想在一个类中包含“ Toast”功能,以便我可以建立默认值并从任何地方访问它。

  1. 如何从类定义中从“ ionic-angular”导入的ToastController中访问方法?通过构造函数传递它意味着当我想使用对我来说没有意义的类创建新对象时,必须传递它。
  2. ToastController create()present()中有两种方法。如果我每当从应用程序的其他位置调用new Toast("My Toast Message")来创建Toast对象的新实例时,toast消息就会按预期方式出现在UI中,那将是一件很酷的事情。我不知道这是否可行,还是我需要返回代码中概述的“创建的”对象。

谢谢

import { ToastController } from 'ionic-angular';

export class Toast {

    private toast: {
        message: string;
        duration: number;
        showCloseButton: boolean;
        position: string;
        cssClass: string;
    }

    public toastCtrl: ToastController; // this doesn't do anything I don't think

    constructor(message: string, 
                duration: number = 3000, 
                showCloseButton: boolean = true, 
                position: string = 'top',
                cssClass: string = 'brand-toast') {

        this.toast = {
            message: message,
            duration: duration,
            showCloseButton: showCloseButton,
            position: position,
            cssClass: cssClass,
        }

        return this.toastCtrl.create(this.toast);

        // would be cool to instead call this:
        // this.toastCtrl.create(this.toast).present();

    }

}

1 个答案:

答案 0 :(得分:0)

首先,您的吐司必须是提供者,您可以在任何地方使用它。

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

@Injectable()
export class ToastProvider

您可以创建自定义吐司的方法或调用默认吐司

private isShowToast: boolean = false;

public showCustomToast(toast: any) {
    if (this.toast !== undefined && this.isShowToast) {
      this.toast.dismiss();
      this.isShowToast = false;
    }

    let customToast = this.toastCtrl.create({
      message: toast.message,
      duration: toast.duration
    });

    customToast.present();
    this.isShowToast = true;
  }

public showDefaultToast(){
    if (this.toast !== undefined && this.isShowToast) {
      this.toast.dismiss();
      this.isShowToast = false;
    }  

    this.toast.present();
    this.isShowToast = true;
}

别忘了将ToastProvider作为提供程序导入到组件和app.module.ts