При нажатии клавиши «Enter» на активном элементе списка Angular - PullRequest
Новая
       19

При нажатии клавиши «Enter» на активном элементе списка Angular

0 голосов
/ 14 мая 2019

Я сделал горизонтальную прокрутку с ресурсами в нем.Я использую клавишу со стрелкой для навигации по списку, теперь я хочу открыть этот конкретный список выделения, нажав Enter.

Component.ts 

arrowkeyLocation = 0;

  @HostListener('document:keydown', ['$event'])
    keyDown(event: KeyboardEvent, resource): void {

      if (event.keyCode === 37 && this.arrowkeyLocation > 0) {
        this.arrowkeyLocation--;
      }

      if (event.keyCode === 39 && this.arrowkeyLocation < this.searchData.toArray().length - 1 ) {
        this.arrowkeyLocation++;
      }

      if (event.keyCode === 13) {
        // do your code here**
        console.log(item);
      }
    }

HTML 

<div #myVar [appSearchfocus]="i === arrowkeyLocation" *ngFor="let resource of all_resources | searchResource: message; let i=index" [ngClass]="{'active': arrowkeyLocation === i }"(keydown)="keyDown($event, resource)" >
    <a target="_blank" href={{resource.url}} class="noDecoration">
        <div >
          <p><b>{{ resource.title }}</b></p>
        </div>
    </a>
</div>

directive.ts 

@Directive({
  selector: '[appSearchfocus]'
})
export class SearchfocusDirective {

  @Input()
      set appSearchfocus(value: boolean){
         if(value){
           this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'scrollIntoViewIfNeeded');
         }
    }

  constructor(private elementRef: ElementRef, private renderer: Renderer) { 
  }

}

Теперь, что я хочу, чтобы вызвать щелчок при навигации по списку, и если я нажму клавишу enter, тогда я хочу открыть этот ресурс.

1 Ответ

0 голосов
/ 14 мая 2019

Я получил результат, используя: 

if (event.keyCode === 13) {
        this.searchData.forEach(element => {
          if (element.nativeElement.classList.contains('active') ) {
            let check: HTMLElement = element.nativeElement.getElementsByTagName("a").item(0);
            check.click(); 
          }

        });

      }
    }
...