如何导航/聚焦到Angular2中的下一个项目？

Question

我想使用箭头键专注于下一项。
在keydown事件处理程序中，我event.currentTarget.nextSibling用来访问下一项。
还有另一种方法可以做到这一点吗？
在事件处理程序中，我想使用JQuery来做到这一点。这该怎么做？

<ul>
    <li *ngFor = "let work of works" tabindex="-1" 
        (keydown.ArrowDown)="handleKeyEvent( $event, 'Arrow Down' )">
        <div class="guide-label">
            <div>{{work.cd}}</div>
            <div>{{work.name}}</div>
        </div>
    </li>
</ul>

export class WorkComponent {
    ...
    handleKeyEvent(event: Event): void {

        event.currentTarget.nextSibling.focus();
        event.preventDefault();
    }
}

Answer 1

创建一个焦点指令（并将其注册到您的中NgModule），focus()当输入值更改为时，该指令会调用host元素true：

@Directive({
  selector : '[myFocus]'
})
class MyFocus {
  constructor(public renderer: Renderer, public elementRef: ElementRef) {}

  @Input()
  set myFocus(value :boolean) {
    if(value) {
      this.renderer.invokeElementMethod(
          this.elementRef.nativeElement, 'focus', []);
    }
  }
}

添加选择器和一个传递的绑定，true或者false在应该聚焦时传递给该指令：

<li *ngFor = "let work of works let idx=index" tabindex="-1" 
    [myFocus]="idx == focusedIdx" (keydown.ArrowDown)="handleKeyEvent( $event, 'Arrow Down' )">

focusedIdx关键事件的更新：

       handleKeyEvent(event: Event): void {
            this.focusedIdx++;
        }

另请参阅Angular 2：关注新添加的输入元素