Question

所以，我有一个bootstrap的下拉菜单（我只实现了没有javascript的样式）...因此我需要移植到angular2一些js功能

一个是键盘辅助功能

到目前为止我已经

了

<div (keydown)="onMenuKeydown($event)" ....>
    <ul class="dropdown-menu">
        <li><a href="#"...>option 1</a></li>
        <li><a href="#"...>option 2</a></li>
        <li><a href="#"...>option 3</a></li>
    </ul>
</div>

在我的控制器中我有这个：

onMenuKeydown(event: KeyboardEvent){
    if(event.keyCode === 40){
        /*event.srcElement.nextSibling.*/
        event.preventDefault();
    }
}

我想要的是，在箭头向下它模拟或触发TAB键（因此它应该关注下一个元素）和箭头键向上模拟SHIFT-TAB键（之前的tabindex）

我有event.srcElement并且具有nextSibling属性但它没有方法焦点...所以不能做event.srcElement.nextSibling.focus（）;

这里最好的解决方案是什么？

Answer 1

所以，作为参考， Element 和 HTMLElement 之间显然有区别，后者是扩展的。

Angular2有一个 ElementRef ，通常在引用HTML元素时使用...

所以要从event.nextSibling中获取HTMLElement

let next = new ElementRef(event.nextSibling);

和使用

next.nativeElement.focus();

不要忘记在您的导入中包含ElementRef

import { Component, ElementRef } from '@angular/core';

Angular2：在keydown触发下一个标签索引（焦点下一个元素）

1 个答案: