如何创建可复用directive为FormGroup内所有子input绑定blur事件

你之前遇到的卡点本质是混淆了ViewChildren和ContentChildren的适用场景，不需要在每个组件里写重复的查询逻辑，只需要通过指令的内置查询能力，就能实现可复用的统一失焦埋点逻辑。

核心卡点说明 #

ViewChildren是组件级的视图查询元数据，只能查询组件自身模板渲染的视图内元素，指令本身没有独立的视图渲染上下文，硬跨组件拿视图查询结果不仅容易丢失元素引用，还完全破坏了指令的可复用性。
要在指令内查询宿主元素下的子元素，正确的方式是使用ContentChildren装饰器——这个装饰器的查询范围是指令所在宿主元素的所有嵌套内容，和组件视图解耦，天然支持跨场景复用。

可复用指令的完整实现 #

下面的实现同时兼容静态表单、动态生成的表单字段，且自带内存泄漏防护：

import { Directive, ContentChildren, QueryList, ElementRef, AfterContentInit, OnDestroy, Renderer2, Input } from '@angular/core';
// 项目内的埋点服务，负责把事件发送给外部分析工具
import { AnalyticsService } from './analytics.service';

@Directive({
  selector: '[trackFormBlur]'
})
export class TrackFormBlurDirective implements AfterContentInit, OnDestroy {
  // 查询宿主元素下所有带formControlName绑定的表单输入域，自动过滤非表单类的干扰元素
  @ContentChildren('formControlName', { read: ElementRef, descendants: true })
  private formInputs!: QueryList<ElementRef<HTMLInputElement>>;

  // 存储所有事件绑定的销毁回调，防止内存泄漏
  private eventRemovers: (() => void)[] = [];

  // 支持自定义埋点事件名，不传入时使用默认值
  @Input() blurTrackEventName = 'form_field_blur';

  constructor(
    private hostEl: ElementRef,
    private renderer: Renderer2,
    private analytics: AnalyticsService
  ) {}

  ngAfterContentInit(): void {
    // 首次加载时为所有已存在的input绑定blur事件
    this.bindBlurTracks();
    // 监听表单内容变化，动态新增的input自动补绑事件，删除的元素自动解绑
    this.formInputs.changes.subscribe(() => {
      this.clearBindings();
      this.bindBlurTracks();
    });
  }

  private bindBlurTracks(): void {
    this.formInputs.forEach(inputRef => {
      const inputDom = inputRef.nativeElement;
      // 提取对应的表单字段名作为埋点参数
      const fieldName = inputDom.getAttribute('formControlName');
      // 绑定blur事件
      const removeBind = this.renderer.listen(inputDom, 'blur', () => {
        this.analytics.send(this.blurTrackEventName, {
          field: fieldName,
          inputValue: inputDom.value
        });
      });
      this.eventRemovers.push(removeBind);
    });
  }

  private clearBindings(): void {
    this.eventRemovers.forEach(remove => remove());
    this.eventRemovers = [];
  }

  ngOnDestroy(): void {
    this.clearBindings();
  }
}

使用方式 #

完全不需要修改现有表单的结构，只需要在你的FormGroup宿主元素上加这个指令标记即可，所有带formControlName的input会自动绑定失焦埋点，不需要逐个写(blur)事件：

<form [formGroup]="userProfileForm" trackFormBlur>
  <input formControlName="username" placeholder="用户名">
  <input formControlName="email" placeholder="绑定邮箱">
  <input formControlName="phone" placeholder="联系手机号">
  <!-- 动态生成的表单项也会自动生效 -->
  <div *ngFor="let item of extraFields">
    <input [formControlName]="item.key" [placeholder]="item.label">
  </div>
</form>

实现优势 #

• 零冗余代码：不需要在每个用到该表单的组件里重复写遍历、绑定事件的逻辑，全局复用同一个指令即可
• 动态表单兼容：自动感知表单内的元素变化，不用手动处理增删字段的事件绑定
• 稳定性保障：所有事件绑定会在指令销毁、列表更新时及时解绑，不会造成无效内存泄漏
• 拓展灵活：可以根据实际需求加配置项，比如过滤type="hidden"的input、排除不需要埋点的敏感字段、自定义埋点携带的额外参数

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