Question

我正在使用Ionic 2，我有实体管理页面，适合不同的数据提供者。现在我有人物管理页面。

export class CharacterListPage{
  currentItems: Character[];

  constructor(public provider: Characters) {
    this.currentItems = this.provider.query();
  }

  // other stuff
}

我需要做生物管理。生物结构与角色结构相同。显而易见的方法就是复制粘贴页面并进行一些重命名：

export class CreatureListPage{
  currentItems: Character[];

  constructor(public provider: Creatures) {
    this.currentItems = this.provider.query();
  }

  // other stuff
}

是否可以使用更有效的方式？

Answer 1

这看起来像是抽象类的典型用例，幸运的是，typescript将该功能带到.js世界：

你有一个基类，我们称之为ListPage，它包含Character和Creature的所有常用功能，然后可以通过其他页面扩展 {em>重用此现有功能：

class ListPage { 
  listItems: Character[] | Creature[]; 

  constructor(provider: Characters | Creatures) { 
    this.listItems = provider.query(); 
  } 

  // other common methods 
} 

class CharacterListPage extends ListPage { 
  constructor(provider: Characters) { 
    super(provider); 
  } 
} 

class CreatureListPage extends ListPage { 
  constructor(provider: Creatures) { 
    super(provider); 
  } 
}

对于这个最小的例子，它可能看起来效率不高，但是当你的类变得更复杂并具有许多常用功能时，它将非常有用。 Here您可以找到有关打字稿类的文档。

如何针对不同的提供商有效地重用Ionic页面？

1 个答案: