Angular2의 다음 항목으로 이동/초점을 맞추는 방법은 무엇입니까?

Question

화살표 키를 사용하여 다음 항목으로 집중하고 싶습니다.
keydown 이벤트 처리기에서 나는 event.currentTarget.nextSibling을 사용하여 다음 항목에 액세스합니다.
다른 방법으로이 작업을 수행 할 수 있습니까?
이벤트 처리기에서 JQuery를 사용하여이 작업을 수행하려고합니다. 이 작업을 수행하는 방법?

@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의 입력 값이 변경 될 때 호스트 요소에 focus()를 호출

<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에 등록) 셀렉터와 바인드는 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: Focus on newly added input element