Angular：注入NgControl后如何处理FormControl更新导致的订阅失效问题

你遇到的问题很典型：当组件中替换FormControl实例时，指令里初始订阅的valueChanges会绑定到旧的控件上，自然无法响应新控件的变化。不用强制重新渲染元素，我们可以直接在指令内部通过监听NgControl的控件变化来修复这个问题。

问题根源 #

你的指令在构造函数里只订阅了一次初始FormControl的valueChanges，但当组件执行this.sampleControl = new FormControl()时，NgControl的control属性会指向新的实例，可原来的订阅并没有更新，所以新控件的值变化不会触发指令里的逻辑。

解决方案 #

我们可以借助KeyValueDiffers来检测NgControl内部control属性的变化，每次检测到控件实例更新时，就取消旧订阅并重新订阅新控件的valueChanges。同时要记得在指令销毁时清理订阅，避免内存泄漏。

完整的指令代码如下：

import { Directive, Self, OnDestroy, DoCheck } from '@angular/core';
import { NgControl, KeyValueDiffers, KeyValueDiffer } from '@angular/forms';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[appMyFormDirective]'
})
export class MyFormDirective implements DoCheck, OnDestroy {
  private controlDiffer: KeyValueDiffer<any, any> | undefined;
  private valueChangesSubscription: Subscription | undefined;

  constructor(
    @Self() private ngControl: NgControl,
    private differs: KeyValueDiffers
  ) {
    // 创建差异检测器，用于监听NgControl的属性变化
    this.controlDiffer = this.differs.find(ngControl).create();
    // 初始化第一次订阅
    this.reSubscribeToValueChanges();
  }

  ngDoCheck(): void {
    const changes = this.controlDiffer?.diff(this.ngControl);
    if (changes) {
      changes.forEachChangedItem(item => {
        // 仅当control属性变化时，重新订阅
        if (item.key === 'control') {
          this.reSubscribeToValueChanges();
        }
      });
    }
  }

  private reSubscribeToValueChanges(): void {
    // 先清理旧的订阅，防止内存泄漏
    this.valueChangesSubscription?.unsubscribe();
    
    // 如果当前有绑定的FormControl，订阅它的valueChanges
    if (this.ngControl.control) {
      this.valueChangesSubscription = this.ngControl.control.valueChanges.subscribe(val => {
        // 这里替换成你的业务逻辑
        console.log('控件值更新:', val);
      });
    }
  }

  ngOnDestroy(): void {
    // 指令销毁时，彻底清理订阅
    this.valueChangesSubscription?.unsubscribe();
  }
}

工作原理 #

• KeyValueDiffers会在每次变更检测周期（通过ngDoCheck钩子）检查NgControl的属性变化，只有当control属性指向新的FormControl实例时，才会触发重新订阅逻辑。
• reSubscribeToValueChanges方法负责统一管理订阅的创建与销毁，确保每次都绑定到当前活跃的FormControl实例。

这样处理后，无论组件在生命周期内替换多少次FormControl，你的指令都能自动跟上变化，无需依赖重新渲染元素的 hack 手段。

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