On Key `Enter` 触发活动列表项 Angular 上的点击事件 [英] On Key `Enter` trigger click event on active list item Angular

问题描述

我制作了一个包含资源的水平滚动条.我正在使用箭头键在列表中导航，现在我想通过单击 Enter 来打开该特定突出显示列表.

组件.ts

arrowkeyLocation = 0;@HostListener('document:keydown', ['$event'])keyDown(事件:KeyboardEvent，资源):无效{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) {//在这里做你的代码**控制台日志(项目)；}}

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>

</a>

指令.ts

@Directive({选择器:'[appSearchfocus]'})导出类 SearchfocusDirective {@输入()设置 appSearchfocus(值:布尔值){如果(值){this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'scrollIntoViewIfNeeded');}}构造函数(私有元素引用:元素引用，私有渲染器:渲染器){}}

现在，我想在列表中导航时触发点击，如果我点击 enter 键，那么我想打开该资源.

解决方案

我得到了结果:

if (event.keyCode === 13) {this.searchData.forEach(元素 => {if (element.nativeElement.classList.contains('active') ) {让我们检查一下: HTMLElement = element.nativeElement.getElementsByTagName("a").item(0);check.click();}});}}

I made a horizontal scroll with resources in it. I'm using the arrow key to navigate in the list, now I want to open that particular highlight list by clicking 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) { 
  }

}

Now, what I want to trigger click while navigating on the list and if I hit enter key then I want to open that resource.

解决方案

I got the result using:

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(); 
          }

        });

      }
    }

这篇关于On Key `Enter` 触发活动列表项 Angular 上的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！