Как я могу обработать событие клавиатуры в <cdk-virtual-scroll-viewport? - PullRequest
Новая
       52

Как я могу обработать событие клавиатуры в <cdk-virtual-scroll-viewport?

0 голосов
/ 12 июня 2019

Я создал виртуальный список прокрутки с divs.Используя привязку событий, я могу прикрепить действия, чтобы щелкнуть по событию 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>

Спасибо за внимание!

1 Ответ

0 голосов
/ 12 июня 2019

Попробуйте добавить tabIndex="0" к элементу <div *cdkVirtualFor.... Это обеспечит возможность перехода к этому элементу с помощью вкладки, что, в свою очередь, позволяет использовать его с событиями нажатия клавиш. Вы также можете использовать ярлык (keydown.enter)="", чтобы разрешить ввод только нажатий клавиш.

...