Question

在我的角度应用程序中，我有一个组件，它实现了两种不同的布局来显示数据。 1）冠状动脉布局 2）列表视图。

所以内容模板看起来像这样。

$uri

两种布局在演示中只有不同，两者都具有相同的功能。

我为这些布局创建了单独的组件。我如何为这两个组件使用相同的功能。我不想在两个不同的component.ts文件中保留相同的功能和数据。我希望我能够正确地提出我的问题。是否存在模板保留在组件范围内的方式。

由于

Answer 1

如果您需要在testData或某些返回值的函数上使用某些函数，只需在其中创建新的类并将其导入两个组件中。

Answer 2

您可以使用OOP继承。

你有一个BaseLayoutTemplate类，它由layout-one-template和layout-two-template组件扩展。

样本：

export class BaseLayoutTemplate {
  doSomething() {
     ....
  }
  protected doSomething2() {
     ....
  }
}

export class LayoutOneTemplateComponent extends BaseLayoutTemplate {
  constructor(){
    super()
  }
  myFunctionInLayoutOneTemplate(){
    this.doSometing()
  }
}

export class LayoutTwoTemplateComponent extends BaseLayoutTemplate {
  constructor(){
    super()
  }
  myFunctionInLayoutTwoTemplate(){
    this.doSometing()
    this.doSometing2()
  }
}

如果BaseLayoutTemplate的构造函数中没有参数，则不需要

super()。如果你拥有它，super会按照母类构造函数的相同顺序获取相同的参数

如果您希望从视图中无法访问该方法，则可以在方法名称之前使用protected。

如果BaseClass的方法必须定义为扩展类，则可以使用抽象类或方法：https://www.typescriptlang.org/docs/handbook/classes.html

Answer 3

你可以使用ngif，当你使用角度4时，你也可以使用ifthen else，它可以精确地满足你的要求。

Chek this post

你还可以查看角度的文档，这有助于理解角度4中的角度

Angular documentation of ngif then else

角度2中的多个模板具有相同的逻辑

3 个答案: