如何在每次输入键时抓取ctrl + f发出的事件，以便在Angular 4中处理页面上的自定义搜索

Question

我在网页上使用角度4的虚拟滚动条（在虚拟滚动条中，列表在运行时加载），因此ctrl + f功能不会处理在某个特定时间点DOM中不存在的数据。因此，为了使Ctrl + f工作，我们的想法是从ctrl + f对话中获取输入字符串，并从列表中搜索该字符串并在其搜索中呈现该项目。因此，每次用户在ctrl + f对话框中输入密钥时，我都需要整个字符串。新的想法也受到欢迎。

Answer 1

在组件中添加此代码。在ngAfterViewInit中

window.addEventListener("keydown",function (e) {
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) { 
        // Do your stuff here 
        // e.preventDefault();
    }
})

Stackblitz

Answer 2

写一个指令：

export class CtrlFDetectorDirective {

    @Output() ctrlF: EventEmitter<boolean>=new EventEmitter();
    constructor() {
    }

    @HostListener('window:keydown', ['$event'])
    onKeyDown(event: KeyboardEvent): void {
        if (event.getModifierState && event.getModifierState('Control') && event.keyCode===70) {
            this.ctrlF.emit(true);
        }
    }
}

DEMO