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

Question

我有一个大型组件，它使用 FormBuilder 将选定记录中的数据加载到 FormGroup 中。

我正在将此组件拆分为可重用服务和子组件。

我有一个从视图调用的函数，用于将新行添加到 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>

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>

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

Move functions that use `this` keyword from a component into a shared service

typescript

angular-services

angular