如何在 <cdk-virtual-scroll-viewport 中处理键盘事件？答案

【问题标题】：How can I process a keyboard event in the <cdk-virtual-scroll-viewport?如何在 <cdk-virtual-scroll-viewport 中处理键盘事件？
【发布时间】：2019-10-26 21:19:08
【问题描述】：

我创建了一个带有 div 的虚拟滚动列表。使用事件绑定，我可以附加操作以单击 dblclick 事件。我想绑定一个像 KeyPress 这样的键盘事件来检测回车键并模仿鼠标点击的动作。无论我尝试什么，事件都不会触发。我究竟做错了什么？

<cdk-virtual-scroll-viewport itemSize="54" id="link-viewport" 
                                *ngIf='linkType.TypeId == data.activeLinkType'
                                [style.flex-basis]='data.linkListFlex'
                                minBufferPx='1080' 
                                maxBufferPx='1350'
                                (onContentScrolled)='onLinkKeyPress()'
                                >
    <div *cdkVirtualFor="let link of ds; let index = index; templateCacheSize: 100" 
                    class="link-item" fxLayout='row' fxLayoutAlign='start center' matRipple
                    [class.tw-link-selected]='link?.LinkId==data.activeLinkId'
                    (click)='onLinkClicked(link.LinkId)'
                    (dblclick)='onLinkDblClicked(link.LinkId)'
                    (onkeypress)='onLinkKeyPress(link.LinkId)'
                    >

        <mat-checkbox class='list-left' *ngIf='showCheckBox()' color='primary' 
                        fxFlex='0 0 20px'
                        [checked]='link.Checked'
                        (change)='onCheckChange(link)'>
        </mat-checkbox>                

        <div class='tw-text-wrapper'
                fxFlex='1 0 100px'
                fxLayout='column' 
                fxLayoutAlign='center start'
                >  
            <span matLine class='tw-list-1'>{{link?.DisplayName || '-'}}</span>
            <span matLine class='tw-list-2'>{{link?.SubTitle}}</span>
        </div>                   

        <button mat-icon-button class="list-remove" *ngIf='showRemoveButton()'
            (click)="onSingleLinkRemoveClicked(link.LinkId)"
            > 
            <mat-icon class='svg-icon' svgIcon="delete"></mat-icon>
        </button>       

    </div>                
</cdk-virtual-scroll-viewport>

感谢您的关注！

【问题讨论】：

按回车键时你的元素是否聚焦？尝试暂时删除您的点击侦听器，然后点击您的元素，然后按 Enter。您也可以使用 (keydown.enter) 只听输入按键。

标签： angular events scroll keyboard virtual

【解决方案1】：

尝试将tabIndex="0" 添加到您的<div *cdkVirtualFor... 元素中。这将确保您可以使用选项卡导航到该元素，这反过来又允许它与 keydown 事件一起使用。您也可以使用(keydown.enter)="" 快捷方式只允许输入按键。

【讨论】：

Thanx Bastien，我会试试看的。