javascript - 在模板中使用 Angular Reactive Forms .get() 方法会导致不必要的方法调用，如组件方法吗？

Question

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

此外，我目前没有遇到任何性能下降，但我想以最好的方式实现这一点，然后再用这个应用程序走得太远(我只是好奇)。

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

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'])

这整个逻辑涉及 迭代 ，因为它从 path 迭代每个元素.

Will this too get executed repeatedly like the method in my component

我会说会的。

我创建了一个 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() ，但我会采用第三种方法，创建一个单独的 property对于我将在 View 中使用的控件。