1. 程式人生 > >ionic2 toast 提示框

ionic2 toast 提示框

import { Injectable } from '@angular/core';

import { Toast, ToastController, ToastOptions } from 'ionic-angular';

@Injectable()

export class ToastControllerService {

    private toast: Toast = null;

    constructor(private tc: ToastController) {}

    /**

     * 開啟toast

     * @param message 提示資訊

     * @param position 位置(top,middle,bottom) 預設 bottom下部

     * @param duration 顯示時長 預設3000ms

     * @param showCloseButton 是否顯示關閉按鈕 預設不顯示

     */

    public open(message: string, position: string = "bottom", duration: number = 3000, showCloseButton: boolean=false): void {

        let option: ToastOptions = { message: message, position: position, duration: duration, showCloseButton: showCloseButton, closeButtonText: '關閉', dismissOnPageChange: true };

        if (this.toast) {

            try {

                this.toast.dismiss().then(() => {

                    this.toast = this.tc.create(option)

                    this.toast.present().catch((e) => {

                        console.log(e);

                    });

                }).catch((e) => {

                    console.log(e);

                });

            } catch (e) {

                console.log(e);

            }

        } else {

            this.toast = this.tc.create(option)

            this.toast.present().catch((e) => {

                console.log(e);

            });

        }

    }

    /**

     * 關閉元件

     */

    public closed(): void {

        if (this.toast) {

            try {

                this.toast.dismiss().then(() => {

                    this.toast = null;

                }).catch((e) => {

                    console.log(e);

                });

            } catch (e) {

                console.log(e);

            }

        }

    }

}