模板中使用Angular Reactive Forms .get（）方法会导致不必要的方法调用，例如组件方法吗？

Question

我知道，如果我在模板中使用方法调用，它将一遍又一遍地执行（不理想）。我已经通过结合使用纯管道和注释方法解决了这一问题。但是我也使用反应形式，并且在模板中使用myFormGroup.get（'myFormControl'）。value获取值。还会像我组件中的方法一样反复执行吗？或者Angular是否有适当的策略来防止这种情况发生？一个使用示例是使用* ngIf并让条件be基于表单的值。

[此外，我目前还没有遇到任何性能下降，但是我想尽可能以最佳方式实施此操作，然后再使该应用程序走得太远（而且很好奇）。

我可以轻松地对其进行更新，以直接引用表单对象上的属性，我只喜欢方法调用的语法。任何见解都会有所帮助，谢谢！

Answer 1

这是当您呼叫AbstractControl.get(...)时发生的事情：

get(path: Array<string|number>|string): AbstractControl|null {
  return _find(this, path, '.');
}

Source。

[_find函数如下所示：

function _find(control: AbstractControl, path: Array<string|number>|string, delimiter: string) {
  if (path == null) return null;

  if (!Array.isArray(path)) {
    path = path.split(delimiter);
  }
  if (Array.isArray(path) && path.length === 0) return null;

  // Not using Array.reduce here due to a Chrome 80 bug
  // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
  let controlToFind: AbstractControl|null = control;
  path.forEach((name: string|number) => {
    if (controlToFind instanceof FormGroup) {
      controlToFind = controlToFind.controls.hasOwnProperty(name as string) ?
          controlToFind.controls[name] :
          null;
    } else if (controlToFind instanceof FormArray) {
      controlToFind = controlToFind.at(<number>name) || null;
    } else {
      controlToFind = null;
    }
  });
  return controlToFind;
}

Source。

您已经注意到，您可以使后代位于表单控件树的更深处。

例如：

form.get('a.b.c')

// Or

form.get(['a', 'b', 'c'])

整个逻辑涉及一个iteration，因为它遍历path中的每个元素。

---

也将像我组件中的方法一样被重复执行

我会说的。

我创建了一个StackBlitz演示来说明这一点：

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input formControlName="name" type="text">  
    </form>

    <hr>

    <p>
      Getter value: {{ name.value }}
    </p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  name2: FormControl

  get name (): FormControl {
    console.log('getter invoked!')

    return this.form.get('name') as FormControl;
  }

  constructor (private fb: FormBuilder) { }

  ngOnInit () {
    this.form = this.fb.group({ name: '' });

    this.name2 = this.form.get('name') as FormControl;
  }
}

如果使用的是getter，则对于输入中键入的每个字符，应该都看到getter invoked!记录了两次（以及get方法也被多次调用。

如果使用{{ form.get('name').value }}，则将多次调用AbstractControl.get方法，而不是期望。

您可以通过打开开发工具，输入forms.umd.js并将log breakpoint放置在path.forEach(function (name) {...}函数主体内的此行_find上进行测试。

并且如果您使用的是this.name2 = this.form.get('name') as FormControl;，则键入时应该不会看到任何记录。

我认为，如果您使用getter或.get()，则[[visible性能降低的可能性较小，但我会采用第三种方法，为我将在视图中使用的控件。