如何防止Angular中的tab事件？

Question

我想使用tab键来执行某些逻辑，但实际上并没有改变焦点。根据this answer's comments，我可以在我的标记中使用false或在方法中使用preventDefault（）。我都喜欢这个。

onKey(event: KeyboardEvent) { 
  event.preventDefault();
  if(event.key = "Tab") { this.update.emit(this.config); }
}

<input #input
   title="{{config|json}}"
   value="{{config.value}}"
   (keyup)="onKey($event)"
   (keydown.Tab)="onKey($event);false;">

当我按Tab键时，它会获得额外的跳跃。当我尝试使用相同的逻辑但基于其他键（例如“a”或“enter”）时，行为与预期一致，因此我得出结论逻辑是正确的。出于某种原因，通过选项卡是不守规矩的，并传播事件，就好像我想要选项卡两次。

我是否错误地处理了Tab键？除了我已经拥有的东西之外，还不确定谷歌的用途。

Answer 1

从stackblitz中提取：https://stackblitz.com/edit/angular-gbuwma?embed=1&file=src/app/app.component.ts

TS

import { Component, ViewChild, ElementRef,ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private changeDetector: ChangeDetectorRef) { }


  @ViewChild("input2") input2: ElementRef;

  onKey(event: KeyboardEvent) {
    event.preventDefault();
    if (event.key === "Tab") {
        console.log('ole... tab');
        this.input2.nativeElement.value = "aha";
        this.changeDetector.detectChanges();
        this.input2.nativeElement.focus();
    }

  }

}

HTML

<input #input
   title=""
   value=""
   (keydown.Tab)="onKey($event);false;">
 - - - 
   <input #input2
   title=""
   value=""
   (keydown.Tab)="onKey($event);false;">

Answer 2

尝试使用此代码：

import { HostListener } from '@angular/core';

@HostListener('document:keydown.tab', ['$event'])
onKeydownHandler(event: KeyboardEvent) {
    event.preventDefault();
}