将使用“此关键字”从组件中使用的函数移动到共享服务中

Question

i具有一个大的组件，该组件将数据从所选记录加载到使用FormBuilder的FormGroup中。

我正在将此组件分为可重复使用的服务和儿童组件。

i具有从视图中调用的函数，将新行添加到formarray中。此函数以数组的名称和要添加的值的名称。

这在组件中正常工作。

问题：如何将此功能移至服务(或其他解决方案(以使其可以在许多不同的组件中重复使用？换句话说，我希望能够在许多组件中使用onaddrow函数，而不必重复重复逻辑。由于此功能利用this关键字访问当前上下文，因此我不确定如何将其移至可重复使用的服务。

这是我试图能够进入服务的组件代码。请注意，我还有许多其他使用this关键字的onaddrow的功能，我希望能够将所有内容都移至可重复使用的服务中。

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>

Answer 1

未经测试 - 在这里签下袖口，但类似的东西应该有效：

// 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;
}

然后只需从正确参数传递的组件...

Answer 2

Blairholmes提供的建议将我指向正确的方向。这也是一篇相关文章。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>