Javascript dispatchEvent不使用键盘事件（4）

我试图监听向下箭头键，并在其位置触发一个tab事件

我的模板包含以下内容

<li #elRef 
    *ngFor="let handler of clickHandlers"
    (click)="doClickHandlerAction(handler)"
    (keydown)="checkArrowKey($event, elRef)">

当按下向下箭头键时，它发送事件，但元素似乎没有接收到事件。底部的if语句检查是否按下了tab键，但在调度事件后不会调用它

有趣的是，如果我用MouseEvent替换keyboardEvent，如下所示

checkArrowKey(event: KeyboardEvent, el) {
    if (event.keyCode === 40) {
      event.preventDefault();

      let keyboardEvent = new KeyboardEvent('keydown', {
        "code": "9",
      });

      el.dispatchEvent(keyboardEvent);
    }
    if (event.keyCode === 9) {
      console.log("tab key pressed");
    }
  }

let clickEvent = new MouseEvent('click', {bubbles: true});

My DoClickHandleration（）函数将被调用，表明问题出在KeyboardEvent上。

似乎

（keydown）

事件只对可聚焦的元素起作用，例如

输入
和
文本区域
，因此在
li
上添加
选项卡index=“0”
属性以添加聚焦行为：

<li #elRef 
    *ngFor="let handler of [1,2,3]" 
    (keydown)="checkArrowKey($event, elRef)" tabindex="0"> hh </li>

这就解释了为什么它没有打印出回答我问题的“按tab键”消息。我希望我可以用这个方法模拟按下tab键，这样箭头键的行为就像tab键一样，但这似乎不适用于类型为{code:number；}的参数“”不可分配给“KeyboardEventInit”类型的参数。我使用的解决方案是使用ngFor last变量检查元素是否是列表中的最后一个元素，以及它是否不是最后一个调用el.nextSibling.focus（）
checkArrowKey(event: KeyboardEvent, el) {

    if (event.keyCode === 40) {
      event.preventDefault();

      let keyboardEvent = new KeyboardEvent('keydown', {
        "code": "9",
      });

      el.dispatchEvent(keyboardEvent);
    }
    if (event.keyCode === 9 || event.code === '9') {
      console.log("tab key pressed");
    }
  }