我有一个arrow up和arrow down需要的指令。当我复制和分页指令的示例之一时，只有第二个工作，但不是第一个。
如何解决这个问题？请关注第一个元素上的第二部分“绿色”部分，并执行up and down箭头移动。
directive.ts:

import {
  Directive,
  ElementRef,
  HostListener,
  AfterViewInit,
} from '@angular/core';

@Directive({
  selector: '[appFocuser]',
})
export class AutoFocusDirective implements AfterViewInit {
  focusableArray = [];
  parent = null;
  count = 0;
  currentFocus: HTMLElement;
  constructor(private el: ElementRef) {}

  @HostListener('document:keyup', ['$event']) onKeyup = ($event) => {
    if ($event.code === 'ArrowDown') {
      if (this.count >= this.focusableArray.length - 1) {
        this.count = 0;
        this.focusableArray[this.count].focus();
        return;
      }
      this.count++;
      this.focusableArray[this.count].focus();
    }
    if ($event.code === 'ArrowUp') {
      if (this.count == 0) {
        this.count = this.focusableArray.length - 1;
        this.focusableArray[this.count].focus();
        return;
      }
      this.count--;
      this.focusableArray[this.count].focus();
    }
  };

  ngAfterViewInit() {
    this.parent = this.el.nativeElement;
    this.focusableArray = Array.from(
      this.parent.querySelectorAll(`[data-focus=true]`)
    );
    if (this.focusableArray.length) {
      this.currentFocus = this.focusableArray[this.count];
      this.currentFocus.focus();
    }
  }
}

Live Demo