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

Question

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

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

用法

首页

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

您可以添加更多常用功能。喜欢吐司味精添加-

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');一样显示吐司.同样，您可以在此处添加存储，加载器和其他常用功能。