호출 키보드 이벤트

Question

어떻게 내가 '여기에 (중첩되는) 버튼을 드롭 다운 UL 리에서 사용 ViewChildren에 가입에 키보드 이벤트

<!-- language: lang-js --> 

import { Component, ElementRef, Renderer,ViewChildren,QueryList,AfterViewInit,OnChanges} from '@angular/core'; 
import {HttpCarService} from './service/vservice'; 
import {Request} from './model/locationrequest.model'; 
import {Location} from './model/location.model'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: '/app/view/loc.html', 
    providers: [HttpCarService] 
}) 
export class AppComponent implements AfterViewInit, OnChanges{ 

    public result: string; 
    public result1: Location[]; 
    public result2: Location[]; 
    public result3: Location[]; 
    public check: boolean; 
    @ViewChildren('seidropdown') 
    seidr: QueryList<Location>; 
    key: KeyboardEvent; 

    selectedLCItem = 'Select an Item'; 
    public isLocationContextSelected: Boolean; 

    setFocus(renderer:Renderer){ 
     this._renderer.invokeElementMethod(
        this.element.nativeElement, 'focus', []); 
       return;     
    } 

    ngAfterViewInit(){ 
    this.seidr.changes.subscribe((KeyboardEvent.bind(this.setFocus(this._renderer),this.result1))); 
    } 
    ngOnChanges(){ 
    }   

    constructor(httpCarService: HttpCarService, element: ElementRef, public _renderer: Renderer) { 
     let request = new Request(false, false, true, true, true, true); 

     httpCarService.getCarsRestful1(request).subscribe(data => this.result1 = data, 
      err => console.log('ERROR!!!'), 
      () => console.log('Got response from API', this.result1) 
     ); 

     this.element = element; 
    } 

    processSelectedContext(item: string) { 
     this.selectedLCItem = item; 
     this.isLocationContextSelected = true; 
    } 

    public element: ElementRef; 

    public inputEvent(e: KeyboardEvent, isUpMode: boolean = false): void { 
     let index = 0; 

     alert('Slice value:' + this.result1.length); 
     console.log('Key Value' + e.key); 
     this.seidr.changes.subscribe(e.currentTarget.addEventListener(this.setFocus())); 
     this.setFocus(this._renderer); 
    } 

    public inputEvent1(e: KeyboardEvent, isUpMode: boolean = false): void { 
     let index = 0; 

     let e1 = this.element.nativeElement.getElementsByTagName('a'); 
     for (index = 0; index < e1.length; index++) { 
      let a1 = e1[index].innerHTML.charCodeAt(0); 
      let a2 = e1[index].innerHTML.charCodeAt(1); 
      let a3 = e1[index].innerHTML.charCodeAt(6); 
      let a4 = e1[index].innerHTML.charCodeAt(50); 

      while (e.keyCode === a1) { 
       this._renderer.invokeElementMethod(
        e1[index], 'focus', []); 
       return; 
      } 
      while (e.keyCode === a2) { 
       this._renderer.invokeElementMethod(
        e1[index], 'focus', []); 
       return; 
      } 
      while (e.keyCode === a3) { 
       this._renderer.invokeElementMethod(
        e1[index], 'focus', []); 
       return; 
      } 
      while (e.keyCode === a4) { 
       this._renderer.invokeElementMethod(
        e1[index], 'focus', []); 
       return; 
      } 
     } 
    } 
} 

를 호출 할 수 있습니다 Angular2의 타이프 라이터의 유형에 ViewChildren 방법 및 설정 초점 가입 직접적인 DOM 상호 작용을 사용하여 getElementBytag을 호출하여 키보드 포커스 이벤트를 달성 할 수 있으므로 각도 2에서 밀접한 결합이 발생할 수 있습니다.

Answer 1

나는 나는 ... 이의 도움과 지침을 구현 한 것이하여 elementRef를 사용하지 않고는 HTMLElement의 노드 목록에 액세스하는 것은 매우 불가능으로 ... 을 지시문을 사용하여 솔루션을 작성했다 ... 여기에 업데이트하는 것을 잊었다 ng2-bootstrap .. https://github.com/valor-software/ng2-bootstrap/blob/development/components/dropdown/dropdown-keyboard-nav.directive.ts