Angular 装饰器 HostListener 监听DOM事件使用指南_@hostlistener('window:

作者：我家自动化 | 2024-03-12 07:39:00

踩

@hostlistener('window:

需求：查询搜索时，希望点击回车默认搜索，不点击搜索按钮

解决方案：在输入的input框中写入(keyup.enter)="ngxQuery.executeQuery()"

当前业务搜索框有搜索后下拉选择，导致选择后回车无效。
最完美的解决办法：使用整个页面监听dom，用户点回车后执行查询事件。

就用到了 angular的HostListener
以下-----使用指南

import { HostListener} from '@angular/core';


@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
    if (event.key === 'Enter') {
     //在这里执行查询事件
    }
  }

1
2
3
4
5
6
7
8
9
10

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/223040

Angular 装饰器 HostListener 监听DOM事件 使用指南_@hostlistener('window:

Angular 装饰器 HostListener 监听DOM事件使用指南_@hostlistener('window: