Переместите функции, использующие ключевое слово this, из компонента в общую службу - PullRequest
Новая
       4

Переместите функции, использующие ключевое слово this, из компонента в общую службу

0 голосов
/ 03 июля 2019

У меня есть большой компонент, который загружает данные из выбранной записи в FormGroup с помощью FormBuilder.

Я нахожусь в процессе разделения этого компонента на повторно используемые службы и дочерние компоненты.

У меня есть функция, которая вызывается из представления для добавления новой строки в FormArray. Эта функция принимает имя массива и добавляемое значение.

Это работает правильно внутри компонента.

Вопрос: Как эту функцию можно перенести в службу (или другое решение), чтобы сделать ее многократно используемой для множества различных компонентов? Другими словами, я хочу иметь возможность использовать функцию onAddRow во многих компонентах без необходимости переписывать логику повторно. Поскольку эта функция использует ключевое слово this для доступа к текущему контексту, я не уверен, как переместить его в службу многократного использования.

Вот код компонента, который я пытаюсь переместить в службу. Обратите внимание, что у меня есть много других функций, похожих на onAddRow, которые используют ключевое слово this, и я хочу иметь возможность переместить все в службу многократного использования.

Компонент TS 

  constructor(
    private fb: FormBuilder
  ) { }

  /**
   * Add a new element to a form control array
   * @param {string} formCtrlArrayName name of the form control array
   * @param {string} valueToAdd element to add to the form control array
   */
  public onAddRow(formCtrlArrayName: string, valueToAdd: any) {
    this[formCtrlArrayName].push(this.fb.control(valueToAdd));
  }

HTML-компонент 

  <button mat-button attr.aria-label="Add Assigned To" matTooltip="Add Assigned To"
    (click)="onAddRow('AssignedTo', '', '')">
    <mat-icon>add_circle</mat-icon>
  </button>

Ответы [ 2 ]

2 голосов
/ 03 июля 2019

непроверенный - списание манжеты здесь, но что-то вроде этого должно работать: 

// this is some reusable code in a service etc
public addRow(formCtrlArray: any, valueToAdd: any): any { // accept any, return any
  let myArray = <Array<any>>formCtrlArray;
  myArray.push(valueToAdd);
  return myArray;
}

, затем просто вызовите это из вашего компонента, передавая правильные параметры ...

0 голосов
/ 03 июля 2019

Совет Блэр Хольмса указал мне верное направление. Также вот соответствующая статья. https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Вот решение, которое у меня есть:

Услуги 

  constructor(
    private fb: FormBuilder
  ) { }

  /**
   * Add a new element to a form control array
   * @param {string} formGroup form group of the form control array
   * @param {string} formCtrlArrayName name of the form control array
   * @param {string} valueToAdd element to add to the form control array
   */
  public addRow(formGroup: any, formCtrlArrayName: string, valueToAdd: any) {
    let control = formGroup.controls[formCtrlArrayName];
    control.push(this.fb.control(valueToAdd));
  }

Компонент TS (обертка для вызова из компонента HTML) 

  constructor(
    private fb: FormBuilder
  ) { }

  /**
   * Add a new element to a form control array
   * @param {string} formCtrlArrayName name of the form control array
   * @param {string} valueToAdd element to add to the form control array
   */
  public onAddRow(formCtrlArrayName: string, valueToAdd: any) {
    this.uiService.addRow(this.itemForm, formCtrlArrayName, valueToAdd);
  }

Компонент HTML (без изменений) 

<button mat-button attr.aria-label="Add Assigned To" matTooltip="Add Assigned To"
  (click)="onAddRow('AssignedTo', '')">
  <mat-icon>add_circle</mat-icon>
</button>
...