使用ng-if的ControlValueAccessor组件销毁后writeValue多次调用的原因及解决

首先咱们来拆解你遇到的问题：当用*ngIf控制自定义组件的显示隐藏时，每次切换都会触发组件的销毁和重建——这是*ngIf的核心特性，它会直接从DOM中移除组件并销毁实例，重新显示时再创建全新的实例。

而你的自定义组件实现了ControlValueAccessor接口，这个接口是Angular表单与组件之间的同步桥梁。每当新的组件实例被创建时，Angular的表单控件会自动调用writeValue方法，把当前表单控件的最新值同步给这个新实例。所以每次切换*ngIf的状态，都会触发一次writeValue调用；如果切换操作频繁，自然就会出现writeValue被频繁触发的情况。

另外，如果父组件中的表单值本身也在频繁变更，那即使不切换*ngIf，writeValue也会被多次触发，结合*ngIf的销毁重建机制，这个调用频率会进一步升高。

针对这个问题，有几个不同的解决方案，你可以根据业务场景选择：

1. 用[hidden]替代*ngIf（推荐无需彻底销毁组件的场景） #

[hidden]只是通过CSS的display: none隐藏组件，不会销毁组件实例，这样组件只会初始化一次，writeValue也只会在初始同步值和表单值真正变更时被调用，不会因为显示隐藏反复触发。

示例代码：

<!-- 原*ngIf写法 -->
<app-custom-control *ngIf="showControl"></app-custom-control>

<!-- 改为[hidden]写法 -->
<app-custom-control [hidden]="!showControl"></app-custom-control>

注意：如果你的自定义组件本身设置了display: inline等非block样式，可能需要调整组件样式确保[hidden]生效，比如在组件样式中添加：

:host {
  display: block;
}

2. 在writeValue中添加值变化校验 #

如果必须使用*ngIf（比如需要彻底销毁组件释放资源），可以在writeValue方法中添加逻辑，只有当传入的值和组件当前保存的值不同时，才执行后续处理，避免重复执行不必要的操作。

示例代码：

export class CustomControlComponent implements ControlValueAccessor {
  private currentValue: any;

  writeValue(value: any): void {
    // 仅当值真正变化时才处理
    if (value !== this.currentValue) {
      this.currentValue = value;
      // 这里编写你的值处理逻辑，比如更新视图等
    }
  }

  // 其他ControlValueAccessor接口方法实现...
}

3. 优化表单控件的同步时机 #

如果父组件中的表单值存在频繁变更的情况，可以在父组件中对值做防抖处理，或者使用distinctUntilChanged操作符过滤重复值，避免不必要的writeValue触发。

示例代码：

import { distinctUntilChanged } from 'rxjs/operators';

// 假设form是你的FormGroup实例
this.form.get('controlName').valueChanges.pipe(
  distinctUntilChanged()
).subscribe(value => {
  // 处理值变更逻辑
});

这样只有当值真正发生变化时，才会触发组件的writeValue，减少无效调用。

内容的提问来源于stack exchange，提问作者Сергей