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

Question

我正在尝试想出类似 Facebook 上的标记功能的东西，即每当按下“@”键时，我的自动完成功能就会被触发，并且我应该能够看到与输入帖子“@”的数据相对应的选项。

我无法绑定 keydown（或任何按键事件）上的自动完成功能

任何有关如何实现此功能的建议将不胜感激，我的最后手段是提出我自己的自动完成模块

Answer 1

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

创建一个ViewChild以获取对MatAutocompleteTrigger

@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;

创建一个HostListener来设置formControl值并在按下键@时打开面板。@

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

斯塔克闪电战

在这个 stackblitz 中，点击视图来设置焦点，否则事件不会触发HostListener

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