按Enter时的Angular Custom Directive Set选项卡索引

问题描述

我想在keydown上触发Tab键事件。以完整的形式输入。对于以下代码，我正在父Div上运行这些函数。在控制台中检测到该事件，但是输入没有发生任何变化（这意味着焦点不会随着Tab键的移动而从输入中移开）。

模板： <Div #parentnode (keydown)="KeyEventEmitter($event,parentnode)>

TS文件：

KeyEventEmitter(event:KeyboardEvent,el) {
//event.preventDefault;
let keyEvent = new KeyboardEvent("keyDown",{key : "Tab",bubbles: true,code: "Tab",location: 0,composed: true,cancelable: true,ctrlKey: false,altKey: false,detail: 0,shiftKey: false
});
console.log('I am custom keyevent',keyEvent)
el.dispatchEvent(keyEvent);
}

}

将感谢您的帮助。谢谢

解决方法

您可以创建一个tabIndex伪指令，并在该伪指令内设置Enter键下一个索引元素的焦点。

tab.directive.ts

import { Directive,Input,ElementRef,HostListener,OnInit } from'@angular/core';
import { TabService } from './tab.service';
import { BehaviorSubject } from 'rxjs';

@Directive({
 selector: '[tabIndex]'
})
export class TabDirective implements OnInit {
 private _index: number;

 get index() {
   return this._index;
 }
 @Input('tabIndex')
 set index(i: any) {
   this._index = parseInt(i);
 }

@HostListener('keydown',['$event'])
onInput(e: any) {
 if (e.which === 13) {
  e.preventDefault();
  console.log('index',this.index+1)
  this.tabService.selectedInput.next(this.index + 1);
 }
}
constructor(private el: ElementRef,private tabService: TabService) {}

ngOnInit(){
  this.tabService.selectedInput.subscribe((i) => {
    if (i === this.index) {
      this.el.nativeElement.focus()
     }
   });
  }
}

创建一个标签服务，在每次按下键时使用BehaviourSubject触发下一个索引。

tab.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({providedIn: 'root'})
export class TabService {
 selectedInput: BehaviorSubject<number> = new BehaviorSubject<number>(1);
}

现在，模板中的tabIndex依次分配给每个元素。

<input type="text" tabIndex="1">
<input type="text" tabIndex="2">
<input type="text" tabIndex="3">
<a href="https://google.com" tabIndex="4">Google</a>

您可以在stackblitz上找到完整的工作示例DEMO