Блог

Прежде всего, мне очень жаль, если в названии не представлена проблема, о которой я собираюсь рассказать. Здесь у меня есть много компонентов, у которых есть объект, который делает то же самое. Я приведу два примера:

Первый компонент, 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() при сборе урожая)

Пока я просто создаю вспомогательную функцию. Например, для компонента filter я создал функцию в helper, чтобы сделать реквизит внутри filter become null . Но все равно, я пишу одно и то же в каждом компоненте, это просто сокращает строку или две. Есть ли какая-нибудь подсказка для меня?

Как и предполагали люди, вы можете использовать каналы. Но я думаю, вы забыли главное преимущество ООП (которое нельзя использовать в Javascript, но реализовано в Typescript). И это наследование класса! 🙂

Помните основы:

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

И то же самое касается членов класса в качестве методов и свойств.
Благодаря Typescript теперь это возможно.