Ionic 2-在不同组件上带有按钮处理程序的警报对话框

2024-03-26

我有 ionic2 应用程序,我想使用通用警报控制器。 所以我可以通过方法参数传输所有数据。在每个组件屏幕上,警报对话框按钮应单独处理。我怎样才能编写这样的警报,以便我可以根据需要处理单独组件上的按钮单击。 请帮助我是 Ionic2 的新手 . 副词中的感谢。


这是警报的共享提供程序

共享.provider.ts

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

@Injectable()
export class SharedProvider { 
  constructor(private _alert: AlertController) { }
  public Alert = {
    confirm: (msg?, title?) => {
      return new Promise((resolve, reject) => {
        let alert = this._alert.create({
          title: title || 'Confirm',
          message: msg || 'Do you want continue?',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              handler: () => {
                reject(false);
              }
            },
            {
              text: 'Ok',
              handler: () => {
                resolve(true);
              }
            }
          ]
        });
        alert.present();
      });

    },
    alert: (msg, title?) => {
      let alert = this._alert.create({
        title: title || 'Alert',
        subTitle: msg,
        buttons: ['Dismiss']
      });

      alert.present();
    }
  }
}

Usage

Home.ts

import { SharedProvider } from '../../providers/shared.provider';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [SharedProvider]
})
export class HomePage {
    constructor(public shared: SharedProvider) {}

    deletePost(gossip) {
        this.shared.Alert.confirm().then((res) => {
            console.log('confirmed');
        }, err => {
            console.log('user cancelled');
        })
    }
}

您可以添加更多常用功能。就像 toast 味精添加一样 -

 public Toast = {
    show: (text: string, duration?, position?, closeButton?, btnText?) => {
      this._toastMsg = this._toastCtrl.create({
        message: text,
        duration: duration || closeButton ? null : 3000,
        position: position || 'top',
        showCloseButton: closeButton || false,
        closeButtonText: btnText || 'OK'
      });
      this._toastMsg.present();
    },
    hide() {
      this._toastMsg.dismiss();
    }
  }

现在显示 toast 像this.shared.Toast.show('message');。同样你可以在这里添加Storage、Loader等常用功能。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ionic 2-在不同组件上带有按钮处理程序的警报对话框 的相关文章

随机推荐