[英]Ionic 2 / Angular 2 Alert as service with Nav
我已经对此进行了不可思议的研究。 希望有人可以在这里帮助我。
我想要为我的应用程序中的各个不同部分提供基本的警报服务,因此我不会在页面上一遍又一遍地复制相同的警报消息。
我设置了警报服务,并且能够显示警报,但是显然您无法从服务访问Nav。 (错误的做法+仍然无法正常工作)
警报-service.ts
networkError() {
let alert = this.alertCtrl.create({
title: 'Network Error',
message: 'There was a network error, are you connected to the internet?',
buttons: [
{
text: 'OK',
handler: () => {
this.navCtrl.push(HomePage); // Redirect to HomePage...Breaks on this and Doesn't work.
}
}
]
});
alert.present();
}
产品page.ts
this.alert-service.networkError();
我从productPage调用此消息,警报显示正常,但是由于NavController而中断。
显然,我只能从我的@componet页访问nav,它将不能作为服务使用。
有什么解决办法吗? 似乎非常需要在应用程序的每个页面上复制简单的警报消息。 我认为服务将是一个简单的解决方案。
您可以使用如下所示的abstract
实用工具class
希望代码是不言自明的。如果您需要任何帮助,请在下面评论。
玩 Git Repo 。
警报-service.ts
import { AlertController, NavController } from "ionic-angular";
import { NetWorkErrorPage } from "../pages/net-work-error/net-work-error";
export abstract class AlertService {
constructor(public alertCtrl: AlertController, public navCtrl: NavController) {
}
//network Error
protected networkError() {
let alert = this.alertCtrl.create({
title: 'Network Error',
message: 'There was a network error, are you connected to the internet?',
buttons: [
{
text: 'OK',
handler: () => {
this.navCtrl.push(NetWorkErrorPage);
}
}
]
});
alert.present();
}
}
home.ts
import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { AlertService } from "../../utility-services/alert-service";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage extends AlertService {
constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
super(alertCtrl, navCtrl);
}
//network error
networkError(): void {
super.networkError();
}
}
另一个解决方案是使用具有所有此类实用程序的BaseComponent
。
export class BaseComponent{
constructor(public alertCtrl:AlertController,public navCtrl:NavController)
networkError() {
let alert = this.alertCtrl.create({
title: 'Network Error',
message: 'There was a network error, are you connected to the internet?',
buttons: [
{
text: 'OK',
handler: () => {
this.navCtrl.push(HomePage); // Redirect to HomePage...Breaks on this and Doesn't work.
}
}
]
});
alert.present();
}
}
然后在您的页面中扩展此类:
export class ProductPage extends BaseComponent{
//...
//call
this.networkError();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.