在键"Enter"上触发活动列表项Angular上的单击事件 [英] On Key `Enter` trigger click event on active list item Angular
本文介绍了在键"Enter"上触发活动列表项Angular上的单击事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我用资源进行了水平滚动. 我正在使用箭头键在列表中导航,现在我想通过单击Enter打开该特定的突出显示列表.
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
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.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
键,那么我想打开该资源.
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();
}
});
}
}
这篇关于在键"Enter"上触发活动列表项Angular上的单击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文