当我使用 2 个单独的指令时，Angular Directive 只有一个实例有效

Posted 2023-02-22

【中文标题】当我使用 2 个单独的指令时，Angular Directive 只有一个实例有效

【英文标题】：Angulare Directive only one instance works, when i use 2 sepate directives

【发布时间】：2021-12-01 00:53:04

【问题描述】：

我有一个针对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

【参考方案1】：

这是因为页面中只有一个元素可以被聚焦。您必须将两个 section 部分放在另一个元素中，并将 appFocuser 指令赋予该元素。

Live Demo

【参考方案2】：

事实上，这两个实例都有效。相继。这里

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

您正在收听整个文档的 keyup 事件。 AutoFocusDirective 的每个实例都会捕获它，所有处理程序都被执行，大概是按照指令初始化的顺序（可能）。第一个将焦点分配到某个地方（您甚至可以看到它的闪光）。然后第二个做同样的事情，抢走焦点。

一种解决方案是不收听document:keyup，而是收听keyup。