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

Question

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

Answer 1

这是警报的共享提供程序

Shared.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();
    }
  }
}

用法

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 msg add-

 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();
    }
  }

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