Angular 8自定义指令如何双向绑定 清除值触发ngOnChanges

问题解决方案 #

核心思路 #

不要直接操作DOM修改输入框内容，通过Angular内置的NgControl实例操作绑定的表单值，走框架内置的变更检测链路，即可同时解决两个问题。

具体实现步骤 #

1. 指令内注入NgControl
   在指令构造函数中注入NgControl，直接获取当前输入框绑定的ngModel实例，无需额外做值同步处理。完整指令示例代码如下：

import { Directive, Input, HostListener, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appSearchbox]'
})
export class SearchboxDirective implements OnChanges {
  // 保留原有输入属性用于监听外部值变更
  @Input() appSearchbox: string;

  constructor(
    private el: ElementRef<HTMLInputElement>,
    private control: NgControl
  ) {}

  ngOnChanges(changes: SimpleChanges) {
    // 外部修改ruleSearchText时会自动触发该钩子
    if (changes.appSearchbox?.currentValue !== undefined) {
      // 你的自定义逻辑：控制清除按钮显隐
      this.toggleClearBtn(this.appSearchbox);
    }
  }

  // 绑定清除按钮点击事件，注意替换成你自己的清除按钮类名判断逻辑
  @HostListener('click', ['$event.target'])
  clearInput(target: HTMLElement) {
    if (target.classList.contains('clear-search-btn')) {
      // 核心操作：通过NgControl更新值，自动同步到外部绑定变量
      this.control.setValue('');
      // 可选：手动触发值变更事件，确保所有监听都能响应
      this.control.valueChanges?.emit('');
    }
  }

  private toggleClearBtn(inputVal: string) {
    const clearBtn = this.el.nativeElement.parentElement.querySelector('.clear-search-btn');
    if (clearBtn) {
      clearBtn.style.display = inputVal?.length ? 'block' : 'none';
    }
  }
}

2. 模板用法无需调整
   原有模板代码可以直接复用：

<input 
  type="text" 
  [(ngModel)]="ruleSearchText" 
  [appSearchbox]="ruleSearchText"
>

问题对应说明 #

• 关于第一个问题：通过control.setValue('')修改值后，Angular双向绑定会自动更新外层ruleSearchText的值，该值更新后会同步传入指令的appSearchbox输入属性，自然触发ngOnChanges生命周期钩子。
• 关于第二个问题：直接操作DOM改值没有进入Angular的变更检测流程，所以不会触发关联的监听事件。通过NgControl更新值属于框架内的状态变更，所有绑定ruleSearchText的视图、ngModelChange事件、值变更订阅都会正常触发。

注意事项 #

使用前确保对应模块已经导入FormsModule，否则NgControl会注入失败。

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