Angular 2：如何在指令中处理输入框变更检测并添加样式类？

嘿，我来帮你搞定这个问题！你说用HostListener没达到预期效果，大概率是监听的事件不对，或者没结合正确的状态绑定方式。下面给你两种实用的实现方案，都能完美满足“输入框有值时添加样式类”的需求：

这种方式最直接，通过监听输入框的input事件（用户输入、粘贴、删除都会实时触发），再用HostBinding动态控制样式类的添加/移除，完全不用手动操作DOM：

import { Directive, HostBinding, HostListener, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appInputHasValue]' // 自定义指令的选择器，随便取个你喜欢的名字
})
export class InputHasValueDirective implements OnInit {
  // 把宿主元素的class和hasValue变量绑定，变量为true时自动添加has-value类
  @HostBinding('class.has-value') hasValue = false;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 初始化时检查输入框的初始值（比如表单回显的场景）
    const initialValue = this.el.nativeElement.value;
    this.hasValue = initialValue.trim().length > 0;
  }

  // 监听input事件，每次输入变化时更新状态
  @HostListener('input', ['$event.target.value'])
  onInputChange(value: string) {
    this.hasValue = value.trim().length > 0;
  }
}

使用的时候，给输入框加上指令即可：

<input type="text" appInputHasValue placeholder="请输入内容">

对应的CSS样式（根据你的需求调整）：

.has-value {
  border-color: #2196F3;
  box-shadow: 0 0 3px rgba(33, 150, 243, 0.3);
}

如果你的项目用了Angular的模板驱动表单（ngModel）或者响应式表单（FormControl），那更推荐用这种方式——直接通过表单控件的valueChanges订阅值的变化，既能覆盖用户手动输入的场景，也能响应代码修改表单值的情况：

import { Directive, HostBinding, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appInputHasValue]'
})
export class InputHasValueDirective implements OnInit {
  @HostBinding('class.has-value') hasValue = false;

  // 注入NgControl来获取表单控件的实例
  constructor(private ngControl: NgControl) {}

  ngOnInit() {
    // 初始化时检查初始值
    const initialValue = this.ngControl.value;
    this.hasValue = (initialValue?.trim().length || 0) > 0;

    // 订阅控件值的变化，实时更新状态
    this.ngControl.valueChanges?.subscribe(value => {
      this.hasValue = (value?.trim().length || 0) > 0;
    });
  }
}

使用示例（两种表单都兼容）：

<!-- 模板驱动表单 -->
<input type="text" appInputHasValue [(ngModel)]="userName" placeholder="请输入用户名">

<!-- 响应式表单 -->
<input type="text" appInputHasValue [formControl]="userNameControl" placeholder="请输入用户名">

为啥你之前的HostListener没生效？ #

大概率是你监听的是change事件而不是input事件——change事件只有在输入框失去焦点时才会触发，没法实时响应用户输入。另外如果用了表单控件，只监听DOM事件的话，当通过代码修改表单值时，DOM事件不会触发，也就不会执行你的逻辑，这时候用方案2就更靠谱啦。

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