Can't use inheritance correctly Ionic 2
I am working on an application with different pages and I wanted to have an abstract class for the page from which all pages inherit. The problem is, if I "produce" one class with an abstract class, it works, but as soon as two or more pages extend the abstract class, it gives me this error:
Cannot read property 'prototype' of undefined
My AbstractPage:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Contact } from '../contact/contact';
import { Page1 } from '../page1/page1';
import { Page2 } from '../page2/page2';
import { Page3 } from '../page3/page3';
import { Page4 } from '../page4/page4';
import { Page5 } from '../page5/page5';
import { Page6 } from '../page6/page6';
import { Page7 } from '../page7/page7';
import { Page8 } from '../page8/page8';
import { Page9 } from '../page9/page9';
import { Page10 } from '../page10/page10';
import { Page11 } from '../page11/page11';
import { Page12 } from '../page12/page12';
import { Page13 } from '../page13/page13';
import { Page14 } from '../page14/page14';
import { Page15 } from '../page15/page15';
import { Page16 } from '../page16/page16';
export abstract class AbstractPage {
static pages = [Page1, Page2, Page3, Page4, Page5, Page6, Page7, Page8, Page9, Page10, Page11, Page12, Page13, Page14, Page15, Page16];
pageNumber: number;
hasSharableContent: boolean;
public navCtrl: NavController;
constructor( page_number: number, has_sharable_content: boolean) {
this.pageNumber = page_number;
this.hasSharableContent = has_sharable_content;
}
changePage(direction: number) {
if (direction==1){
console.log(direction,this.pageNumber);
this.navCtrl.setRoot(AbstractPage.pages[this.pageNumber], {}, {animate: true, direction: 'forward'});
}
else if(direction == 2){
this.navCtrl.push(Contact);
}
else{
this.navCtrl.setRoot(AbstractPage.pages[this.pageNumber-1], {}, {animate: true, direction: 'back'});
}
}
}
My page:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {AbstractPage } from '../abstract-page/abstract-page';
@Component({
selector: 'page1',
templateUrl: 'page1.html'
})
export class Page1 extends AbstractPage{
constructor(public navCtrl: NavController) {
super(1, false);
}
}
My page2:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AbstractPage } from '../abstract-page/abstract-page';
@Component({
selector: 'page2',
templateUrl: 'page2.html'
})
export class Page2 extends AbstractPage{
constructor(public navCtrl: NavController) {
super(2, true);
}
}
I've added a repo on GitHub in case anyone wants to try and resolve the issue : https://github.com/francescobenintende/Tests/tree/master/abstraction
Error : http://imgur.com/a/0PfTe
source to share
Update:
You cannot use this kind of inheritance for page components with Ionic2 and Typescript now. Hope you can do this with Ionic3 and the latest Typescript to be included in Ionic3. This issue is related to Typescript and the webpack.
You can get more details here .
You can also see this issue here if you examine the file main.js.map
. First it creates a subclass ( Page1
) and after that a base class ( AbstractPage
). This is the reason for this error. Unfortunately, we cannot change the order.
Old answer:
You can try with public
constructor()
in a class abstract
like below.
export abstract class AbstractPage {
constructor(public page_number: number,public has_sharable_content: boolean) {
}
changePage(direction: number) {
if (direction==1){
console.log(direction,this.page_number);
this.navCtrl.setRoot(AbstractPage.pages[this.page_number], {}, {animate: true, direction: 'forward'});
}
else if(direction == 2){
this.navCtrl.push(Contact);
}
else{
this.navCtrl.setRoot(AbstractPage.pages[this.page_number-1], {}, {animate: true, direction: 'back'});
}
}
}
source to share