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

Question

我在网页上使用的是angular 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