使用FormControl的valueChanges订阅是否需在ngOnDestroy中取消订阅？

先给你明确结论，分两种情况：

• 如果你的typeCtrl是组件内部自己创建的（比如在组件里用new FormControl()或者FormBuilder生成，不是从父组件传进来的），当组件销毁时，这个FormControl实例会被垃圾回收，对应的valueChanges订阅也会跟着被清理，不会造成内存泄漏，这种情况下可以不用手动取消。
• 但如果typeCtrl是通过@Input从父组件传入的，组件销毁后这个FormControl实例还会被父组件持有，此时你的订阅不会自动取消，会导致内存泄漏，这种情况必须手动取消订阅。

不过从代码健壮性和最佳实践角度，不管哪种情况，都更推荐用下面两种方式管理订阅，避免潜在问题：

方式1：用takeUntil操作符配合销毁钩子 #

这是Angular项目中最常用的订阅管理方式，统一处理所有订阅的取消：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 定义一个销毁信号Subject
private destroy$ = new Subject<void>();

ngOnInit() {
  this.typeCtrl.valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe((value) => {
      this.percent = value === 'new' ? '20' : '10';
    });
}

ngOnDestroy() {
  // 发送销毁信号，取消所有订阅
  this.destroy$.next();
  this.destroy$.complete();
}

方式2：用async管道自动管理 #

如果你的percent值是要在模板中展示的，可以把逻辑转换成Observable，用Angular的async管道，它会自动在组件销毁时取消订阅：

// 组件类中定义Observable
percent$ = this.typeCtrl.valueChanges.pipe(
  map(value => value === 'new' ? '20' : '10')
);

模板中直接使用：

<p>当前百分比：{{ percent$ | async }}</p>

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