我正在开发一个包含不同页面的应用程序,我想为所有页面继承的页面创建一个抽象类。 问题是,如果我用抽象类“扩展”一个类,它就可以工作,但是一旦我有两个或更多页面扩展了抽象类,它就会给我这个错误:
Cannot read property 'prototype' of undefined
我的 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'});
}
}
}
我的 Page1 是:
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);
}
}
我的 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);
}
}
如果有人想尝试解决问题,我已经在 GitHub 上添加了一个 repo: https://github.com/francescobenintende/Tests/tree/master/abstraction
最佳答案
更新:
您现在不能在 Ionic2 和 Typescript 中使用这种页面组件继承。希望您可以在 Ionic3 和 Ionic3 中包含的最新 Typescript 中做到这一点。这个问题与 Typescript 和 web pack 有关。
可以得到more info here .
如果您探索 main.js.map
文件,您也可以在此处看到问题。它首先创建一个子类 (Page1
),然后在该基类 (AbstractPage
)。这就是这个错误的原因。但不幸的是,我们无法更改顺序。
旧答案:
您可以尝试在 abstract
类上使用 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'});
}
}
}
关于angular - 无法正确使用继承 Ionic 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43140580/