Enter 键按下的行为类似于 Angular 中的 Tab

Question

我有一个 Angular 2+ 表单组，每个表单字段都有 tabIndex。

如何在每次按 Enter 键时将焦点更改到下一个表单字段（类似于按 Tab）？

JavaScript 参考 - Enter 按键的行为类似于 Javascript 中的 Tab

Answer 1

我会用一个简单的指令和一个更简单的服务来做到这一点。

tab.directive.ts

import { Directive, Input, ElementRef, HostListener, OnInit } from '@angular/core';
import { TabService } from './tab.service';
type IKNOWISNUMBER = any;
type IKNOWISSTRING = any;

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

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

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

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

选项卡.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable()
export class TabService {
  selectedInput: BehaviorSubject<number> = new BehaviorSubject<number>(1);
}

我创建了一个小型stackblitz来展示它是如何工作的。

PS 请记住在每个组件内提供 tab.service 和表单，因为每个表单都需要一个特定的实例。