Angular中的指令问题答案

【问题标题】：Directive issue in AngularAngular中的指令问题
【发布时间】：2026-02-02 23:45:02
【问题描述】：

我有一个可以正常工作的下拉菜单。如果用户选择一个选项，然后按下键盘上的 “删除” 或 “退格” 按钮，下拉菜单中的值将被清除（效果很好）。但是，我正在尝试创建一个 Directive 来做同样的事情，但我无法让它工作。谁能指出我如何正确创建此指令的正确方向？

提前非常感谢！

这是我的代码：

LIVE DEMO

onKeyUp(evt){
   if(evt.keyCode === 8){
     this.isShowClear = false;
     let currentElementName = evt.currentTarget.getAttribute('name');
     this.myForm.controls[currentElementName].patchValue('');
 }
}

onChange(){
this.isShowClear = true;
}

【问题讨论】：

标签： angular typescript primeng

【解决方案1】：

这是指令代码

@Directive({
  selector: '[customDropDown]'
})
export class CustomDropDownDirective {

  @Output() updateProperty: EventEmitter<any> = new EventEmitter();

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

    @HostListener('keyup',['$event'])onkeyup(event:any){
    if(event.keyCode === 8){
       let currentElementName = this.el.nativeElement.value;
      this.control.control.setValue('');
      this.updateProperty.emit(false);
    }
  }
}

这是LIVE DEMO 的链接，我只是更新了您的示例。还有一件事，就是你忘了在app.component.ts 中包含你的指令，这就是他没有在演示中工作的原因。

【讨论】：

另外添加event.keyCode === 46 用于删除键。
@SaddamPojee 是的，你是对的，我忘了提到这个 keyCode，因为我 fork 他的例子，所以这就是我错过它的原因。

【解决方案2】：

您可以使用 keypress 来帮助您捕捉 keypress 上的事件。可以这样实现

@HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    this.key = event.key;

    // inside this you can catch your key code
    // then check is it backspace or delete keycode 
    // if it is then remove data from selector with help of NgControl.
  }

别忘了从 @angular/core 导入你的 NgControl。

【讨论】：