删除Observable会连带删除其订阅吗？Angular表单组删除后需关注订阅吗？

首先直接给你结论：当你从FormArray中删除FormGroup（或者销毁任何FormControl/FormGroup实例）时，这些控件上的订阅不会自动被取消。如果不手动清理，那些已经被移除的控件对象会因为被订阅引用着，无法被垃圾回收，最终导致内存泄漏。

为什么会这样？因为Angular的表单控件本身不会追踪你为它的valueChanges、statusChanges等Observable添加的订阅。这些订阅是你主动创建的，Angular没有义务帮你自动取消——它根本不知道你加了哪些订阅。

那该怎么处理？给你几个实用的方案：

• 优先用AsyncPipe（模板端处理）
  如果你的订阅是用来在模板里展示数据或状态，直接用Angular的AsyncPipe就好。它会自动在组件销毁时取消订阅，完全不用你手动操心。比如：

  <div *ngIf="myFormControl.statusChanges | async as controlStatus">
    当前控件状态：{{ controlStatus }}
  </div>
  

• 手动管理Subscription（组件类处理）
  把所有订阅都收集到一个Subscription对象里，然后在组件的ngOnDestroy钩子中统一取消。比如：

  import { Component, OnDestroy, OnInit } from '@angular/core';
  import { FormArray, FormGroup } from '@angular/forms';
  import { Subscription } from 'rxjs';
  
  @Component({...})
  export class YourComponent implements OnInit, OnDestroy {
    private subscriptions = new Subscription();
    public formArray: FormArray;
  
    ngOnInit() {
      // 假设你给某个动态添加的FormGroup里的控件加了订阅
      const newGroup = new FormGroup({...});
      const controlSub = newGroup.get('yourControl').valueChanges.subscribe(value => {
        // 你的业务逻辑
      });
      this.subscriptions.add(controlSub);
      this.formArray.push(newGroup);
    }
  
    removeFormGroup(index: number) {
      // 移除前也可以单独取消这个组里的订阅，不过统一在ngOnDestroy处理也没问题
      this.formArray.removeAt(index);
    }
  
    ngOnDestroy() {
      // 取消所有订阅
      this.subscriptions.unsubscribe();
    }
  }
  

• 用takeUntil操作符（更灵活的方式）
  创建一个销毁信号的Subject，所有订阅都通过takeUntil操作符绑定到这个信号上，组件销毁时发出信号，所有订阅都会自动取消。这种方式适合订阅较多的场景，代码更整洁：

  import { Component, OnDestroy, OnInit } from '@angular/core';
  import { FormArray, FormGroup } from '@angular/forms';
  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  
  @Component({...})
  export class YourComponent implements OnInit, OnDestroy {
    private destroy$ = new Subject<void>();
    public formArray: FormArray;
  
    ngOnInit() {
      const newGroup = new FormGroup({...});
      newGroup.get('yourControl').valueChanges
        .pipe(takeUntil(this.destroy$))
        .subscribe(value => {
          // 你的业务逻辑
        });
      this.formArray.push(newGroup);
    }
  
    removeFormGroup(index: number) {
      this.formArray.removeAt(index);
    }
  
    ngOnDestroy() {
      this.destroy$.next();
      this.destroy$.complete();
    }
  }
  

额外提醒：如果你的订阅是在服务中创建的（不是组件内部），那更要注意——服务的生命周期通常比组件长，必须在FormGroup被移除时，手动找到对应的订阅并取消，不然泄漏会更严重。

总的来说，只要你手动管理好这些订阅，就不用担心已移除的控件还留在内存里啦。

内容的提问来源于stack exchange，提问作者Craig