Angular 5：监听按钮disabled变化或实现指令，自动聚焦下一个按钮

这是个很实用的需求，我来帮你一步步实现这个nextActiveBtn指令和配套的焦点循环逻辑，完全满足你的要求：

1. 创建自定义指令 #

这个指令的核心是监听按钮的disabled属性变化，同时标记该按钮属于我们要处理的子集。我们用MutationObserver来监听元素属性变化，这样不管disabled是通过绑定函数、直接赋值还是其他方式修改的，指令都能精准捕捉到变化：

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[nextActiveBtn]'
})
export class NextActiveBtnDirective implements OnInit, OnDestroy {
  private observer: MutationObserver | null = null;
  @Output() disabledChange = new EventEmitter<boolean>();

  constructor(private el: ElementRef<HTMLButtonElement>) {}

  ngOnInit() {
    // 监听按钮元素的disabled属性变化
    this.observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === 'disabled') {
          const isDisabled = this.el.nativeElement.disabled;
          this.disabledChange.emit(isDisabled);
        }
      });
    });

    this.observer.observe(this.el.nativeElement, {
      attributes: true,
      attributeFilter: ['disabled']
    });
  }

  ngOnDestroy() {
    this.observer?.disconnect();
  }

  // 提供聚焦当前按钮的方法
  focus() {
    this.el.nativeElement.focus();
  }

  // 判断当前按钮是否可用
  isEnabled(): boolean {
    return !this.el.nativeElement.disabled;
  }
}

2. 父组件中处理焦点切换逻辑 #

在父组件里，我们用ViewChildren获取所有带有nextActiveBtn指令的按钮实例，然后监听每个按钮的disabledChange事件，当某个按钮变为禁用状态时，自动找到下一个可用的按钮并聚焦：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { NextActiveBtnDirective } from './next-active-btn.directive';

@Component({
  selector: 'app-button-group',
  template: `
    <button id="btn1" #button1 [disabled]="checkIfIsDisable()" nextActiveBtn> Ändern </button>
    <button #button2 type="button" [disabled]="checkIfIsDisable()" nextActiveBtn> Text1 </button>
    <button #button3 type="button" [disabled]="checkIfIsDisable()" nextActiveBtn> Text2 </button>
    <button #button4 type="button" [disabled]="checkIfIsDisable()" nextActiveBtn> Text3 </button>
    <button #button5 type="button" [disabled]="checkIfIsDisable()" nextActiveBtn> Text4 </button>
  `
})
export class ButtonGroupComponent implements AfterViewInit {
  @ViewChildren(NextActiveBtnDirective) buttonDirectives!: QueryList<NextActiveBtnDirective>;

  ngAfterViewInit() {
    // 给每个按钮指令绑定禁用变化的监听
    this.buttonDirectives.forEach(btnDirective => {
      btnDirective.disabledChange.subscribe(isDisabled => {
        if (isDisabled) {
          this.focusNextAvailableButton(btnDirective);
        }
      });
    });

    // 可选：初始加载时自动聚焦第一个可用按钮
    const firstEnabledBtn = this.buttonDirectives.find(btn => btn.isEnabled());
    firstEnabledBtn?.focus();
  }

  // 找到下一个可用的按钮并聚焦，支持循环查找
  private focusNextAvailableButton(currentBtn: NextActiveBtnDirective) {
    const btnArray = this.buttonDirectives.toArray();
    const currentIndex = btnArray.indexOf(currentBtn);

    // 从当前按钮的下一个位置开始循环查找可用按钮
    for (let i = 1; i <= btnArray.length; i++) {
      const nextIndex = (currentIndex + i) % btnArray.length;
      const nextBtn = btnArray[nextIndex];
      if (nextBtn.isEnabled()) {
        nextBtn.focus();
        break;
      }
    }
  }

  // 你的禁用判断函数（保持原有逻辑即可）
  checkIfIsDisable(): boolean {
    // 这里写你的禁用判断逻辑，比如根据业务状态返回true/false
    return Math.random() > 0.5; // 示例：随机模拟禁用状态
  }
}

3. 关键细节说明 #

• 指令独立性：用MutationObserver监听属性变化，完全不依赖你设置disabled的checkIfIsDisable函数，不管disabled是怎么被修改的，指令都能触发回调。
• 子集筛选：通过nextActiveBtn指令标记需要处理的按钮，ViewChildren(NextActiveBtnDirective)只会获取这些标记过的按钮，页面上其他不带该指令的按钮不会被纳入循环。
• 循环聚焦：当当前按钮禁用时，从下一个位置开始循环查找，直到找到第一个可用的按钮，实现无缝的循环切换效果。
• 资源清理：指令中在ngOnDestroy里断开MutationObserver，避免内存泄漏。

内容的提问来源于stack exchange，提问作者user8707389