且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular 5:按下特定键时触发垫自动完成

更新时间:2023-11-02 17:17:52

您可以执行以下操作来完成此操作.

You can do the following to accomplish this.

创建一个 ViewChild 以获取对 MatAutocompleteTrigger

Create a ViewChild to get reference to the MatAutocompleteTrigger

@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;

创建一个HostListener,设置formControl值为@,当@键为@键时打开面板按下.

Create a HostListener to set the formControl value to @ and open the panel when the @ key is pressed.

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.key == '@') {
      this.stateCtrl.setValue('@');
      this._auto.openPanel();
    }
  }

Stackblitz

在本次stackblitz中,点击view设置焦点否则事件不会触发HostListener

In this stackblitz, click the view to set focus or the event will not trigger the HostListener

https://stackblitz.com/edit/angular-4x3zte?embed=1&file=app/autocomplete-overview-example.ts