如何通过指令触发PrimeNG p-autoComplete组件的焦点事件？

PrimeNG的p-autoComplete组件的焦点实际落在其内部的<input>元素上，而非组件本身的宿主元素。你直接在组件标签绑定onFocus/onBlur事件，或者在自定义指令中监听宿主的focus/blur事件，自然不会触发——因为宿主元素从未获得焦点。

修改自定义指令，监听组件内部input元素的焦点事件即可。以下是调整后的代码：

调整后的指令代码 #

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { ShortcutService } from './your-path-to-shortcut-service'; // 替换为你的服务实际路径

@Directive({
  selector: '[orlyDisableShortcuts]'
})
export class DisableShortcutsDirective implements OnInit, OnDestroy {
  private inputElement: HTMLInputElement | null = null;
  private focusHandler?: () => void;
  private blurHandler?: () => void;

  constructor(
    private shortcutService: ShortcutService,
    private el: ElementRef<HTMLElement>
  ) { }

  ngOnInit(): void {
    // 定位p-autoComplete内部的input元素（PrimeNG默认给input加p-inputtext类）
    this.inputElement = this.el.nativeElement.querySelector('input.p-inputtext');
    
    if (this.inputElement) {
      // 绑定焦点事件处理函数
      this.focusHandler = () => {
        console.log('输入框获得焦点：禁用快捷键');
        this.shortcutService.disableShortcuts();
        // 这里可添加焦点状态提示逻辑，比如添加高亮样式、显示提示框
        this.inputElement?.classList.add('focused-highlight');
      };

      this.blurHandler = () => {
        console.log('输入框失去焦点：启用快捷键');
        this.shortcutService.enableShortcuts();
        // 移除焦点状态提示
        this.inputElement?.classList.remove('focused-highlight');
      };

      this.inputElement.addEventListener('focus', this.focusHandler);
      this.inputElement.addEventListener('blur', this.blurHandler);
    }
  }

  ngOnDestroy(): void {
    this.shortcutService.enableShortcuts();
    // 移除事件监听，避免内存泄漏
    if (this.inputElement && this.focusHandler) {
      this.inputElement.removeEventListener('focus', this.focusHandler);
    }
    if (this.inputElement && this.blurHandler) {
      this.inputElement.removeEventListener('blur', this.blurHandler);
    }
  }
}

补充：焦点状态视觉提示（可选） #

如果需要通过样式直观标识焦点状态，可在CSS中添加：

.autocomplete-custom input.p-inputtext.focused-highlight {
  border-color: #2196F3;
  box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

备选方案：直接用组件输出事件 #

如果不想修改指令，也可以直接利用p-autoComplete提供的onFocus/onBlur输出事件，确保组件类中的方法正确实现：

// 组件类中的方法
onAutocompleteFocus(): void {
  this.shortcutService.disableShortcuts();
  // 添加焦点提示逻辑
}

onAutocompleteBlur(): void {
  this.shortcutService.enableShortcuts();
  // 移除焦点提示逻辑
}

这种方式更贴合PrimeNG的组件设计，但指令方式的复用性更强。

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