Angular 角度8:formGroup中的内存泄漏

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

步骤：

-打开开发工具性能选项卡->右侧

自定义和控制开发工具

-单击
显示控制台抽屉

-单击左下角的性能监视器

-单击左窗格中的
JS heap size

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

我将myGroup设置为null Ngondestory，可观察值更改会破坏但仍保留内存大小

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

更新：

组件。ts

    import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
import { startWith, pairwise, distinctUntilChanged,takeUntil } 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(),
          distinctUntilChanged(),
          takeUntil(this.unsubscribe)
          )
        .subscribe(([prev, next]: [any, any]) => {
          // var configId = group.get("name");
          console.log(next);
        });
    }
  }


}

从'@angular/core'导入{Component，Input，OnInit，OnDestroy}；
从'@angular/forms'导入{FormGroup，FormControl，FormBuilder，FormArray}；
从“rxjs/operators”导入{startWith，成对，distinctUntilChanged，takeUntil}；
从'rxjs'导入{Subject}；
@组成部分({
选择器：“你好”，
模板：`
姓名：
`,
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent实现OnInit、OnDestroy{
isFormInitialized=假；
myForm:FormGroup；
AuditUnsubscribe:主题=新主题（）；
公开退订：主题=新主题（）；
groupName=“列表”；
property=“name”；
初始化=假；
构造函数（私有formBuilder:formBuilder）{}
恩戈尼尼特（）{
this.myForm=this.formBuilder.group（{}）；
}
ngAfterViewInit（）{
让controlarray1=this.formBuilder.array（[]）；
this.myForm.addControl（this.groupName，controlarray1）；
让groupControl=this.formBuilder.control（null）；
const control=this.myForm.controls[this.groupName]作为FormArray；
this.myForm.setControl（this.groupName，control）；
var listControl=this.formBuilder.group（{}）；
var ctr=this.formBuilder.control（null）；
addControl（“名称”，ctr）；
control.push（listControl）；
console.log（this.myForm）；
此.subsubscribeToFormControlValueChanges（列表控件，ctr，“名称”）；
this.initialze=true；
}
恩贡德斯特罗（）{
this.myForm=null；
this.unsubscribe.next（）；
此为.unsubscribe.complete（）；
this.AuditUnsubscribe.next（）
this.AuditUnsubscribe.complete（）；
}
子订阅FormControlValueChanges(
组别:FormGroup,，
fctrl:FormControl，
属性名称
) {
如果（fctrl）{
fctrl.valueChanges
.烟斗(
startWith（空），
成对（），
distinctUntilChanged（），
takeUntil（此。取消订阅）
)
.订阅（（[prev，next]：[any，any]）=>{
//var configId=group.get（“名称”）；
console.log（下一步）；
});
}
}
}

请帮忙

谢谢。
每次初始化表单时，您都会重新创建一个
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);
            });
    }
  }

没有代码，没有可能提供帮助。嘿@philippMeissner，我已经提供了github链接。我已经再次更新了我的问题…请不要放弃投票。谢谢回复。但它不起作用。销毁后仍会占用内存。