Angular4中HostListener的onBlur与onFocus事件无法触发

嘿，我来帮你捋捋这个指令的问题！你说指令初始化没问题，但点击输入框时focus和blur事件没触发，大概率是几个常见的小细节没处理好，咱们一步步排查：

1. 先检查HostListener的事件名是否正确 #

很多人会不小心把原生事件名写成onFocus/onBlur，但Angular的HostListener需要用原生事件的名称（不带on前缀）。比如正确的写法应该是：

@HostListener('focus', ['$event'])
onFocus(event: FocusEvent) {
  console.log('获得焦点啦！');
  // 你的业务逻辑
}

@HostListener('blur', ['$event'])
onBlur(event: FocusEvent) {
  console.log('失去焦点啦！');
  // 你的业务逻辑
}

如果之前写的是@HostListener('onFocus')，那肯定不会触发，这是最常见的坑！

2. 确认指令已在模块中正确注册 #

虽然你说指令已经初始化，但还是要再确认下：你的ShortNumberFormatterDirective有没有加到对应模块的declarations数组里？比如：

import { NgModule } from '@angular/core';
import { ShortNumberFormatterDirective } from './short-number-formatter.directive';

@NgModule({
  declarations: [
    // 其他组件、管道...
    ShortNumberFormatterDirective // 必须在这里注册！
  ],
  // 其他配置（如果需要在其他模块使用，还要加到exports里）
})
export class YourFeatureModule { }

如果模块没注册指令，就算模板里加了选择器，指令也不会真正生效。

3. 检查模板中指令的使用是否正确 #

确保输入元素上的指令选择器和你在@Directive装饰器里定义的完全一致。比如你定义的选择器是[shortNumberFormatter]，那模板里应该这么写：

<input type="text" shortNumberFormatter>
<!-- 注意不要写成短横线分隔的，除非你定义的选择器是[short-number-formatter] -->

4. 排查是否有其他代码阻止了事件冒泡 #

如果输入元素上还有其他指令、或者直接绑定了(focus)/(blur)事件，有没有可能其中某个逻辑调用了event.stopPropagation()或者event.preventDefault()？这会导致HostListener监听不到事件。可以先暂时移除其他绑定，单独测试这个指令。

5. 用控制台日志验证事件是否触发 #

在你的事件处理函数里先加个简单的console.log，比如我上面示例里的那样，然后打开浏览器控制台看看有没有输出。如果日志都没出来，那就是事件没绑定上；如果有日志但业务逻辑没执行，那就是逻辑内部有错误。

给你贴一个完整的可测试指令示例，你可以对照着改：

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

@Directive({
  selector: "[shortNumberFormatter]"
})
export class ShortNumberFormatterDirective implements OnInit {

  constructor(private el: ElementRef) {}

  ngOnInit() {
    console.log('ShortNumberFormatter指令初始化完成');
  }

  @HostListener('focus', ['$event'])
  onFocus(event: FocusEvent) {
    console.log('输入框获得焦点', this.el.nativeElement.value);
    // 这里写你的聚焦逻辑，比如格式化显示原始值
  }

  @HostListener('blur', ['$event'])
  onBlur(event: FocusEvent) {
    console.log('输入框失去焦点', this.el.nativeElement.value);
    // 这里写你的失焦逻辑，比如格式化显示短数字
  }
}

按照上面的步骤排查下来，应该能找到问题所在！

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