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

我有一个大型组件，它使用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));
  }

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

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[formCtrlArrayName].push(this.fb.control(valueToAdd));
  }

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

加上一个圆圈

未经测试-在此处即兴书写，但类似的内容应该可以：

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

//这是服务等中的一些可重用代码
public addRow（formCtrlArray:any，valueToAdd:any）：any{//接受any，返回any
让myArray=formCtrlArray；
myArray.push（valueToAdd）；
返回myArray；
}

---

然后从您的组件调用它，并传递正确的参数…

未经测试-在这里即兴写下，但类似的内容应该可以工作：

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

//这是服务等中的一些可重用代码
public addRow（formCtrlArray:any，valueToAdd:any）：any{//接受any，返回any
让myArray=formCtrlArray；
myArray.push（valueToAdd）；
返回myArray；
}

---

然后从组件调用它，并传递正确的参数…

BlairHolmes提供的建议为我指明了正确的方向。这里还有一篇相关文章

以下是我的解决方案：

服务

  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组件调用的包装器）

HTML组件（未更改）

加上一个圆圈
布莱尔霍姆斯提供的建议为我指明了正确的方向。这里还有一篇相关文章

以下是我的解决方案：

服务

  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组件调用的包装器）

HTML组件（未更改）


加上一个圆圈
您可以将组件中的数组推送到可重用函数中，添加所需内容并返回。您可以将组件中的数组推送到可重用函数中，添加所需内容并返回。谢谢！如何从html模板传入formCtrlArray参数？在调用OnAddressRow之前，还会出现一条错误消息
myArray.push不是一个函数
您仍然需要通过组件的类方法进行点动。至于你第二次评论中的错误，就像我说的，我没有测试过。这里的逻辑是将
formCtrlArray
转换为一个数组，这样所有数组的方法都会公开（
push（）
就是其中之一）。还有其他的策略可以用于对阵列进行强制转换，因此您必须反复尝试，然后才能将其排除在外……谢谢！如何从html模板传入formCtrlArray参数？在调用OnAddressRow之前，还会出现一条错误消息
myArray.push不是一个函数
您仍然需要通过组件的类方法进行点动。至于你第二次评论中的错误，就像我说的，我没有测试过。这里的逻辑是将
formCtrlArray
转换为一个数组，这样所有数组的方法都会公开（
push（）
就是其中之一）。还有其他一些策略可以用于对阵列进行强制转换，因此您必须反复尝试。。。。