Question

首先，如果标题不代表我要告诉的问题，我感到非常抱歉。在这里，我有很多具有对象的组件，它们的功能完全相同。我举两个例子：

第一个组件，PlanningComponent：

export class PlanningComponent implements OnInit {

  constructor() {}

  data = {
     items: null,
     isEmpty: null as boolean,
     getData: () => {
        /* fetching data from database and store it in items properties */
     },
     /* another method related to data goes here */
  };
  pagination = {
     totalData: null as number, /* this prop gets its value within getData process */
     currentPage: null as number, /* this prop already has a value within OnInit process */
     goNext: () => {
        this.pagination.currentPage += 1; 
        this.data.getData();
     },
     goLast: () => {
        this.pagination.currentPage = this.totalData;
        this.data.getData();
     },
     /* another method related to pagination goes here */
  };
  filter = {
    filterA: null as string,
    filterB: null as number,
    filterC: null as string,
    isEnabled: null as boolean,
    isToggled: null as boolean,
    onReset: () => {
      this.filter.filterA = null;
      this.filter.filterB = null;
      this.filter.filterC = null;
      this.data.getData();
    },
    /* another function related to filter goes here */
  };
}

第二部分，HarvestComponent：

export class HarvestComponent implements OnInit {

  constructor() {}

  data = {
     items: null,
     isEmpty: null as boolean,
     getData: () => {
        /* fetching data from database and store it in items properties */
     },
     /* another method related to data goes here */
  };
  pagination = {
     totalData: null as number, /* this prop gets its value within getData process */
     currentPage: null as number, /* this prop already has a value within OnInit process */
     goNext: () => {
        this.pagination.currentPage += 1; 
        this.data.getData();
     },
     goLast: () => {
        this.pagination.currentPage = this.totalData;
        this.data.getData();
     },
     /* another method related to pagination goes here */
  };
  filter = {
    filterX: null as string,
    filterY: null as number,
    filterZ: null as string,
    isEnabled: null as boolean,
    isToggled: null as boolean,
    onReset: () => {
      this.filter.filterX = null;
      this.filter.filterY = null;
      this.filter.filterZ = null;
      this.data.getData();
    },
    /* another function related to filter goes here */
  };
}

正如您所看到的，这两个组件看起来完全相同。区别在于调用该函数（例如pagination.goNext()）时data.items的值，过滤器属性和受影响的数据。第一部分称为计划的getData()，第二部分称为收获的getData()。是的，你明白了。

我不想一次又一次地写相同的代码，我要开发的应用程序有很多页面，但是行为却相似。有什么好的方法可以使代码在我的情况下可重用？

我试图考虑为分页和过滤创建不同的组件，但是我仍然不清楚如何使该组件影响不同的数据（规划中的data.items()，data.items()收获中

到目前为止，我只创建了一个辅助函数。例如，对于过滤器组件，我在助手中创建了一个函数，以使过滤器中的道具变为null。但是，我在每个组件中都写了同样的东西，只是剪了一两行。对我有什么提示吗？

Answer 1

正如人们建议的那样，您可以使用管道。但是我认为您已经忘记了OOP的主要优点（OOP不能在Javascript中使用，而是在Typescript中实现）。这是类继承！：）

记住基础知识

==> D:\bat\SO\55237418.bat on

==> echo        1st:
       1st:

==> Set "_var=first"

==> Set "_var=second"   & Echo first   & CALL Echo %_var%
first
second

==> echo        2nd:
       2nd:

==> Set "_var=first"

==> Set "_var=second"   & CALL Echo %_var%   & Echo first
second
first

对于类成员，方法和属性也是如此。多亏了Typescript，现在才有可能。

如何使可重用的功能在角度上影响不同的数据？

1 个答案: