Typescript and multiple classes

Question

I have a component class as EventSchedulePage.It extends HandleStorageService abstract class as shown below.You can see that there is

Answer 1

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: '' })
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.