5

I have a component class as EventSchedulePage.It extends HandleStorageService abstract class as shown below.You can see that there is a method named showInvalidTokenAlert() on this subclass.I have to call this method each and every component(This method gives a token based error message to the user).So can you tell me how to implement or redesign my classes to cater this situation? 'cause I don't like to put showInvalidTokenAlert() on each and every component.I would like to keep that method's implementation on a single place.

Subclass

    export class EventSchedulePage extends HandleStorageService {

    constructor() {
        super();
         }

     showInvalidTokenAlert() {
       //show alert
      }
  }

abstract class 

export abstract class HandleStorageService {
  result: string = '';

  constructor() {
  }
}
Improve this question
4
  • 1
    Then why don't you put showInvalidTokenAlert in HandleStorageService? Commented Mar 26, 2017 at 13:21
  • That service is for handling Storage related things only.That is the reason for that.@NitzanTomer Commented Mar 26, 2017 at 13:28
  • is it ionic 2 in particular? if so you could just inject a provider with that function.. Commented Mar 26, 2017 at 13:48
  • 1
    Hmm.. I tried to find a solution based on TS.But it seems the only solution is provider based injection.I'll try that.Meanwhile, you can put an answer about this too. @suraj Commented Mar 26, 2017 at 13:52

3 Answers 3

Reset to default
6

You could create a BasePage, and put there all the shared code.

import { Component, Injector } from '@angular/core';
import { AlertController, ...} from 'ionic-angular';

@Component({ selector: '', template: '<span></span>' })
export class BasePage {

    private _alertCtrl: AlertController;
    private _toastCtrl: ToastController;

    constructor(public injector: Injector) { }

    // Get methods used to obtain instances from the injector just once
    // ----------------------------------------------------------------

    // AlertController
    public get alertCtrl(): AlertController {
        if (!this._alertCtrl) {
            this._alertCtrl = this.injector.get(AlertController);
        }
        return this._alertCtrl;
    }

    // ToastController
    public get toastCtrl(): ToastController {
        if (!this._toastCtrl) {
            this._toastCtrl = this.injector.get(ToastController);
        }
        return this._toastCtrl;
    }

    // ...

    // Helper methods
    // ----------------------------------------------------------------

    public showAlertMessage(message: string): void {
        let alert = this.alertCtrl.create({ ... });
        alert.present();
    }

    public showToastMessage(message: string): void {
        let toast = this.toastCtrl.create({ ... });
        toast.onDidDismiss(() => {
            console.log('Dismissed toast');
        });
        toast.present();
    }

}

The key is that the BasePage receives an instance of the injector from the subclass, so you could obtain any instance that you need from it (like the AlertController instance that you need to show an alert message). By using the get methods, each instance will be obtained from the injector just once.

And then in all the pages from your app:

import { Component, Injector } from '@angular/core';
import { BasePage } from '../path/to/base';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage extends BasePage {

    constructor(public injector: Injector) {
        super(injector);
    }

    public someMethod(): void {
        // You can use the methods from the BasePage!
        this.showAlertMessage('Your message...');
    }

    public someOtherMethod(): void {
        this.showToastMessage('Another message');
    }

}

This way is super easy to add some more helper methods.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

my issue here is I'm already using abstract base class no (i.e. HandleStorageService )? that is for handling storage related methods.So how can I extend 2 classes on TS?
what about moving the logic from HandleStorageService to the BasePage? After all it could be also considered a helper...
@Sampath I've edited the answer in order to fix that issue, and also to show you where to include that method. About the injector, remember that in Angular 2 apps there isn't only a single injector, but a hierarchy of injectors (each component has it's own injector) so we need to send that instance to the BasePage to be able to use the right instance of AlertCtrl, ToastCtrl, and so on (if we don't do that, when you try to use the alertCtrl to show a message it may use a different alertCtrl insstance, and can show the alert on some other component -or pages in our case when using Ionic-)
Great example. Just to mention that for ionic 4 we need async/await async showAlertMessage(message: string) { let alert = await this.alertCtrl.create({...}); alert.present(); }
This is an awesome solution, thanks so much for posting it. I did a LOT of searching around to find this, SO much better than jerry-rigging a service.
|
0

You can create a separate provider class with the showInvalidTokenAlert() function

@Injectable()   
export class AlertProvider{
  constructor(){}

  showInvalidTokenAlert(){
  //...
  }
}

Set it in app.module.ts as provider in case you require as singleton

 @ngModule({
   //...
   providers:[
      AlertProvider,
   //..
   ]
 })

Inject in any component you require.

export class EventSchedulePage extends HandleStorageService {

   constructor(private alertProvider:AlertProvider) {
       super();
      }
  //call this.alertProvider.showInvalidTokenAlert()
}
Improve this answer

10 Comments

can't I use public navCtrl: NavController inside the AlertProvider like this? constructor(public alertCtrl: AlertController, public navCtrl: NavController) {}.It gives this error Error: Uncaught (in promise): Error: Error in ./MyApp class MyApp - inline template:0:0 caused by: No provider for NavController! Error: DI Error.Do you know why?
github.com/driftyco/ionic/issues/9581 seems like it is by design...
try using @Inject(NavController) navController: NavController in the constructor
hmm.. It seems anti-pattern no? I mean using service layer to handle UI related things? That is why I tried to get the solution based on TS.What is your thoughts about this?
It seems right.. I didnt suggest it since you wanted to extend some other class already.."That service is for handling Storage related things only.That is the reason for that." you could go with that method and have HandleStorageService as a provider..
|
0

hmm.. It seems anti-pattern no? I mean using service layer to handle UI related things? That is why I tried to get the solution based on TS.What is your thoughts about this? – Sampath

It is definitely more MVCS-like (Model-View-Controller-Service) to handle that in the controller. But that is a widely taken approach.

If you want to go for it, @suraj's answer is my personal recommendation.

Handling alerts on the controller is certainly possible. Keep reading.

event-schedule-page.service.ts

export class EventSchedulePage extends HandleStorageService {
  // ...
  foo() {
    if (!bar) {
      throw new Error('Something went wrong.');
    }
    // ...
  }
}

home.controller.ts

export class HomeController {
  // ...
  foo() {
    try {
      eventSchedulePageService.foo();
    } catch (error) {
      window.alert(error); // Handle and UI display the error on the controller.
    }
  }
}

To follow up, you can use custom error classes or separate functions to throw / handle your errors.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.