Ionic 2-警报对话框，带有不同组件上的按钮处理程序 [英] Ionic 2- Alert Dialog with button handlers on different components

问题描述

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

I have ionic2 application and I want to use common alert controller. So I can transfer all data through method parameters. On each component screen Alert dialogs button should be handled separately. How can I write such alert so I can handle button click on separate component as per need. Please help I am new to Ionic2 .Thanks in adv.

推荐答案

以下是Alert的共享提供商

Here is shared provider for Alert

共享.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 -

You can add more common functionality. Like for 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();
    }
  }

现在显示像这样的吐司.shared.Toast.show（ '信息'）; 。同样，您可以在此处添加存储，加载程序和其他常用功能。

Now display toast like this.shared.Toast.show('message');. Similarly you can add Storage, Loader and other common function here.

这篇关于Ionic 2-警报对话框，带有不同组件上的按钮处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！