时间戳

首页 > 解决方案 > Angular8：formGroup中的内存泄漏

angular - Angular8：formGroup中的内存泄漏

问题描述

我正在使用 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

组件.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);
        });
    }
  }


}

请任何帮助。

谢谢。

标签： angularrxjsangular-reactive-forms

解决方案

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

推荐阅读