Блог

У меня есть директива для 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();
    }
  }
}
 

Живая демонстрация

Фактически, работают оба экземпляра. Одну за другой. Здесь

   @HostListener('document:keyup', ['$event']) onKeyup = ($event) => {
 

вы прослушиваете событие keyup для всего документа. Каждый экземпляр AutoFocusDirective перехватывает его, выполняются все обработчики, предположительно в порядке инициализации директив (вероятно). Первая где-то назначает фокус (вы даже видите вспышку этого). Затем вторая делает то же самое, крадя фокус.

Одним из решений было бы вместо прослушивания document:keyup , прослушивания keyup .

Это потому, что только один элемент на странице может быть сфокусирован. Вы должны поместить обе section части в другой элемент и передать appFocuser директиву этому элементу.

Живая демонстрация