Question

我有一个自举下拉列表如下：

 <span class="dropdown">
   <button class="dropdown-toggle" data-toggle="dropdown">Boot Dropdown
    <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
    <li keyArrows *ngFor="let option of listOptions [class.select]="listOption==option" (click)="listOption=option">{{option.title}}</li>
  </ul>
 </span>

当我按下Enter键时，下拉列表会打开，但我无法使用键盘向上和向下箭头遍历列表中的项目。我想使用Angular 2指令实现它。

我做了以下事情：

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
    selector: "[keyArrows]"
})
export class KeyArrows implements OnDestroy {
    private arrows;
    constructor(el: ElementRef) {
        this.arrows = function (event) {
           switch(event.which){
               case 37: //left
               console.log("Left arrow triggered");
               break;

               case 38: //up
                var target = $(event.target).prev();
                $(target).trigger('focus');
               console.log("Up arrow triggered");
               break;

               case 39: //right
               console.log("right arrow triggered");
               break;

               case 40: //down
               var target = $(event.target).next();
               $(target).trigger('focus');
               console.log("down arrow triggered");
               break;

               default: return; //exit handler for other keys
           }

           event.preventDefault();
        }
        document.addEventListener('keydown', this.arrows, false);
    }

    ngOnDestroy() {
        document.removeEventListener('keydown', this.arrows, false);
    }
}

目前，该指令并不起作用，因为我遗漏了一些我无法弄清楚的重要内容。

我想知道是否有人可以帮助我解决他们如何完成这项任务的专业知识，或指出我正确的方向或评论我在这里写的任何内容。

谢谢。

使用键盘箭头遍历下拉列表的指令

0 个答案: