Page Inheritance Problem

Ionic Framework ionic-v3
1

I am trying to setup a simple OO pattern of multiple pages inheriting from the same parent sot act I can encapsulate common functionality in the parent. I have the following files

BasePage.ts

import {Page, Modal, Alert, NavController, MenuController, NavParams, ViewController} from 'ionic-framework/ionic';
import {Configuration} from 'providers/configuration/configuration'
import {ColumnName,ColumnDataType} from 'pipes/columnName';
import {AddDatasource} from 'pages/add-datasource/add-datasource';
import {ConfigDetails} from 'pages/configuration-details/configuration-details';

@Page({
    template:null,
    providers:[Configuration]
})
export class BaseConfigurationPage {
    protected configurations:Array<any>;

    constructor(protected nav: NavController, protected configuration:Configuration, protected viewCtrl: ViewController) {
        this.configuration = configuration;
        this.viewCtrl = viewCtrl;
    }

    addDatasourceModal() {
        let testModal = Modal.create(AddDatasource);
        this.nav.present(testModal);
    }

    extendedDetails(configuration) {
        let extDetails = Modal.create(ConfigDetails, configuration);
        this.nav.present(extDetails);
    }

    enableConfiguration(configurationToUpdate) {
        console.log("this is a test");
        console.log(configurationToUpdate.enabled);

        this.configuration.updateConfigurationStatus(configurationToUpdate.company,configurationToUpdate.configuration,configurationToUpdate.enabled)
            .subscribe(result => {
                    console.log("Result of disable/enable request:");
                    console.log(result);
                },
                err => {
                    console.log(err);
                });
    }

    dismissModal() {
        this.viewCtrl.dismiss(0);
    }
}

// page1

import {Page, Modal, Alert, NavController, MenuController, NavParams, ViewController} from 'ionic-framework/ionic';
import {Configuration} from 'providers/configuration/configuration'
import {ColumnName,ColumnDataType} from 'pipes/columnName';
import {BaseConfigurationPage} from 'pages/base-configuration-page/base-configuration-page';

@Page({
    templateUrl: 'build/pages/tab1/running.html',
    providers: [Configuration],
    pipes:[ColumnName,ColumnDataType]
})
export class RunningConfigsTab extends BaseConfigurationPage  {
    private hasConfigs;

    constructor(protected nav: NavController, protected configuration:Configuration, protected viewCtrl: ViewController) {
        super(nav, configuration, viewCtrl);
        this.hasConfigs = true;
        this.loadConfigurations();
    }

    loadConfigurations() {
        this.configuration.loadRunningConfigurations('Pillar Innovations')
            .subscribe(result => {
                console.log(result);
                this.configurations = result
            }, err => {
                this.hasConfigs = false;
                console.log('No running configurations found');
            });
    };
}

//page 2

import {Page, Modal, Alert, NavController, MenuController, NavParams, ViewController} from 'ionic-framework/ionic';
import {Configuration} from 'providers/configuration/configuration'
import {ColumnName,ColumnDataType} from 'pipes/columnName';
import {BaseConfigurationPage} from 'pages/base-configuration-page/base-configuration-page';

@Page({
    templateUrl: 'build/pages/tab1/active.html',
    providers: [Configuration],
    pipes:[ColumnName,ColumnDataType]
})
export class RunningConfigsTab extends BaseConfigurationPage  {
    private hasConfigs;

    constructor(protected nav: NavController, protected configuration:Configuration, protected viewCtrl: ViewController) {
        super(nav, configuration, viewCtrl);
        this.hasConfigs = true;
        this.loadConfigurations();
    }

    loadConfigurations() {
        this.configuration.loadActiveConfigurations('Pillar Innovations')
            .subscribe(result => {
                console.log(result);
                this.configurations = result
            }, err => {
                this.hasConfigs = false;
                console.log('No running configurations found');
            });
    };
}

The issue I am running into is that each page is ALWAYS loading the same templateUrl no matter what. It is always loading active.thml even when I have the running tab selected. The web console always shows it going out and grabbing active.html no matter the tab.

If I remove the inheritance, everything loads and works as expected. I am assuming I am missing something in how the injects work of NavController and ViewController but I am not sure.

Any Thoughts?

1 Like
2

What happens if you remove the @Page decorator from the BaseConfigurationPage ?

2 Likes
3

That does solve the issue, although I don’t quite understand how?

4

Few things -

a) You do not need @Page directive in the first place if your objective is to simply have inheritance. From what I understood you simply wanted to move shared code from child pages to a base class.

b) Marking a class with @Page must have implications in ionic especially in the context of templateUrl. How would they decide which templateUrl to use ? May be the overriding the template and/or decorator in the case inheritance is something that have not looked at

Regards
Kapil

1 Like
5

That would make sense. I just assumed that the templateUrl in the annotation would override.

Thanks for your help!