在ViewChildren的subscription方法中调用键盘事件并在Angular2打字稿中将焦点设置为类型

Question

如何在按钮下拉列表ul li（嵌套）中使用的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;
            }
        }
    }
}

在这里，我可以通过调用getElementBytag使用直接DOM交互来实现键盘焦点事件，这可能导致angular2紧密耦合。

Answer 1

我忘了在这里更新...我已经写了使用指令的解决方案......由于这是不太可能访问HTML元素的节点列表，而无需使用elementRef ......已经实现与一定的帮助指导NG2自举.. HTTPS ：//github.com/valor-software/ng2-bootstrap/blob/development/components/dropdown/dropdown-keyboard-nav.directive.ts