[Angular8：formGroup中的内存泄漏

Question

我正在使用Angular8应用程序。在这里我在github上创建了示例项目。

步骤：

-打开“开发工具”性能选项卡->右侧customize and control DevTools。

-单击show console drawer。

-单击左下角的performance monitor。

-单击左窗格中的JS heap size。

-现在单击应用程序按钮initForm，destroyForm处理重复4-5次。

我将myGroup设置为null ngOndestroy，并且Observable valuechanges销毁，但仍保留内存大小。

这里是销毁表单（）之后的内存保留大小和堆屏幕截图

更新：FormControlComponent.ts

component.ts

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
import { startWith, pairwise, distinctUntilChanged } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'hello',
  template: `<div *ngIf="initialze" [formGroup]="myForm" >
    <div formArrayName="lists" *ngFor="let a of myForm.get('lists').controls; let i = index">
    <div [formGroupName]="i" style="margin-bottom: 10px;">
      <label for="name">Name:</label>
      <input type="text" name="name" formControlName="name">
    </div>
  </div>
</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit,OnDestroy  {


 isFormInitialized = false;
  myForm: FormGroup;
  AuditUnsubscribe: Subject<any> = new Subject();
  public unsubscribe: Subject<any> = new Subject();
  groupName = "lists";
  property = "name";
  initialze = false;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({});
  }
  ngAfterViewInit() {
    let controlarray1 = this.formBuilder.array([]);
    this.myForm.addControl(this.groupName, controlarray1);
    let groupControl = this.formBuilder.control(null);

    const control = this.myForm.controls[this.groupName] as FormArray;
    this.myForm.setControl(this.groupName, control);
    var listControl = this.formBuilder.group({});
    var ctr = this.formBuilder.control(null);
    listControl.addControl("name", ctr);
    control.push(listControl);
    console.log(this.myForm);

    this.subsubscribeToFormControlValueChanges(listControl, ctr, "name");
    this.initialze = true;
  }

   ngOnDestroy(){
    this.myForm = null;
    this.unsubscribe.next();
    this.unsubscribe.complete();
    this.AuditUnsubscribe.next()
    this.AuditUnsubscribe.complete();
  }

  subsubscribeToFormControlValueChanges(
    group: FormGroup,
    fctrl: FormControl,
    propertyName
  ) {
    if (fctrl) {
      fctrl.valueChanges
        .pipe(
          startWith(null),
          pairwise()
        )
        .pipe(distinctUntilChanged())
        .subscribe(([prev, next]: [any, any]) => {
          // var configId = group.get("name");
          console.log(next);
        });
    }
  }


}

请任何帮助。

谢谢。

Answer 1

每次初始化表单时，您都会重新创建一个hello组件，在该组件上，对表单值的订阅会发生更改。但是不要取消订阅。我认为您需要在您的订阅方法中使用takeUntil运算符。

    subsubscribeToFormControlValueChanges(
          group: FormGroup,
          fctrl: FormControl,
          propertyName
      ) {
        if (fctrl) {
          fctrl.valueChanges
            .pipe(
              startWith(null),
              pairwise(),
              distinctUntilChanged(),
              takeUntil(this.unsubscribe)
            )
            .subscribe(([prev, next]: [any, any]) => {
              // var configId = group.get("name");
              console.log(next);
            });
    }
  }