时间戳

首页 > 解决方案 > 如何制作影响角度不同数据的可重用函数？

javascript - 如何制作影响角度不同数据的可重用函数？

问题描述

首先，如果标题不代表我要告诉的问题，我很抱歉。在这里，我有很多组件都有一个完全做同样事情的对象。我举两个例子：

第一个组件，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 */
  };
}

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

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

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

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

标签： javascriptangulartypescript

解决方案

正如人们所建议的，您可以使用管道。但是我想你已经忘记了 OOP 的主要好处（它不能在 Javascript 中使用，但在 Typescript 中实现）。它是类继承！:)

记住基础知识：

class base {
    variable1;
    constructor() {
       this.variable1 = 1;
    }
}
class child extends base {
    variable2;
    constructor() {
        super();
        console.log(this.variable1);
    }
}

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

推荐阅读