Ionic 2 / Angular 2 Alert作为Nav服务

Question

I have researched this beyond belief. Hopefully someone can help me here.

I want a basic Alert service for some various sections in my App so I am not duplicating the same alert messages over and over across my pages.

I setup an alert service and I am able to get the alert to show, however apparently you cant access Nav from a service. (bad practice + doesn't work anyway)

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

product-page.ts

this.alert-service.networkError();

I call this from a productPage the alert shows fine, however breaks with NavController.

Apparently I can only access nav from my @componet page, it will not work as a service.

Is there any solution to this? Seems awfully involved to have to duplicate simple alert messages on every page across the app. I thought a service would be a simple solution.

Answer 1

You can use abstract utility class as shown below.Hope code is self-explanatory.If you need any help please comment below.

Play with Git Repo .

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


}

Answer 2

Another solution is having a BaseComponent with all such utilities.

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

}

Then in your page extend this class:

export class ProductPage extends BaseComponent{
//...

//call
this.networkError();
}