angular - ไม่สามารถใช้การสืบทอดได้อย่างถูกต้องใน Ionic 2

ฉันกำลังพัฒนาแอปที่มีหลายหน้าและฉันต้องการมีคลาสนามธรรมสำหรับหน้า ที่หน้าทั้งหมดสืบทอดมาจาก แต่ปัญหาคือหากฉัน "extends" คลาสหนึ่งด้วยคลาสนามธรรม มันสามารถทำงานได้ แต่ทันทีที่ฉันให้สองหน้าหรือมากกว่าสืบทอดคลาสนามธรรม มันจะแสดงข้อผิดพลาดนี้:

Cannot read property 'prototype' of undefined

หน้า Abstract ของฉันคือหน้านี้:

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

หน้าของฉัน1 คือ:

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

หน้าของฉัน2 คือ:

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

ฉันได้เพิ่มรีโปบน GitHub หากใครต้องการลองแก้ปัญหา: https://github.com/francescobenintende/Tests/tree/master/abstraction

ข้อผิดพลาด: https://i.sstatic.net/nLaG4.jpg

คำตอบ #1

อัปเดต:

คุณไม่สามารถใช้การสืบทอดคอมโพเนนต์หน้าแบบนี้กับ Ionic2 และ Typescript ได้ในตอนนี้ หวังว่าคุณจะสามารถทำได้กับ Ionic3 และ Typescript เวอร์ชันล่าสุดซึ่งจะถูกรวมอยู่กับ Ionic3 ปัญหานี้เกี่ยวข้องกับ Typescript และ webpack

คุณสามารถรับ ข้อมูลเพิ่มเติมที่นี่ ได้

คุณเองก็สามารถเห็นปัญหาที่นี่ได้ถ้าคุณสำรวจไฟล์ main.js.map มันสร้างซับคลาส (Page1) ก่อน และหลังจากนั้นถึงคลาสฐาน (AbstractPage) นั่นคือสาเหตุของข้อผิดพลาดนี้ แต่โชคร้ายที่เราจะไม่สามารถเปลี่ยนลำดับได้

คำตอบเก่า:

คุณสามารถลองใช้ public constructor() บนคลาส abstract ดังที่แสดงด้านล่าง

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