Question

使用默认的html选择，您可以使用键盘搜索此列表中的元素，但默认延迟时间较短。我需要找到一种解决方案来延长此计时器的时间。

我正在使用角度为6的材质，但没有找到内置解决方案（文档中没有属性或选项）。我尝试制定自己的解决方案，但默认事件是覆盖我的事件。

这是我的实现材料：https://stackblitz.com/edit/material-tooltip-select-search?file=src%2Fapp%2Fapp.component.html

如您所见，如果我先按“ t”，“ o”，“ n”然后“ i”，则Toni被选中约0.1s，然后浏览器选择以“ i”开头的名字（虹膜）。

除了实现自己的解决方案（或者使用材料搜索组件，不是这个主意）之外，还有其他解决方案吗？或者是否可以禁用默认事件？

谢谢！

解决方案：

根据元帅的回答，我下达了指令来做这项工作：https://stackblitz.com/edit/material-select-search?file=src%2Fapp%2Fselect-search.directive.ts

Answer 1

似乎将其添加到您的组件中可以在keydown事件停止默认传播时达到目的。

constructor(){
     document.addEventListener('keydown', e => {
      if ((e.target as any).nodeName === 'MAT-SELECT') {
        e.stopImmediatePropagation();
      }
    }, true);
  }

请参考此github问题，其中提供了stackblitz示例。

https://github.com/angular/material2/issues/11654

您需要获取keydown事件，然后stopImmediatePropagation()滴入视图/ mat-select。这就是<mat-select placeholder="Favorite food" (keydown)=""不能解决该问题的原因，因为该事件已经由事件处理了。通过模板触发按时间（按下按键）输出的mat-select组件。

按下键盘键

1 个答案: