无法正确使用继承 Ionic 2

Question

我正在开发一个包含不同页面的应用程序，我想为所有页面继承自的页面创建一个摘要 class。问题是，如果我 "extend" 一个 class 和抽象的一个，它就可以工作，但是一旦我有两页或更多页扩展了摘要 class 它就会给我这个错误：

Cannot read property 'prototype' of undefined

我的摘要页是这个：

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

错误: http://imgur.com/a/0PfTe

Answer 1

更新：

你不能在 Ionic2 和 Typescript 中使用这种页面组件继承 now.Hope 你可以在 Ionic3 中使用，最新的 Typescript 将包含在 Ionic3.This 问题与 Typescript 相关和网络包。

你可以获得more info here.

如果您探索 main.js.map file.It 首先创建子 class(Page1) 并在该基础 class (AbstractPage)。这就是 error.But 不幸的原因，我们无法更改顺序。

旧答案：

您可以尝试在 abstract class 上使用 public constructor()，如下所示。

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

无法正确使用继承 Ionic 2

Cannot use inheritance properly Ionic 2

inheritance

extends

typescript

ionic2

angular