Angular 14：Tab键聚焦元素添加/移除display:block样式求助

一、实现Tab键移出时移除样式 #

你当前的代码仅处理了Tab键聚焦的场景，要实现移出时移除样式，更可靠的方式是结合元素的焦点事件（Tab键移出本质是元素失去焦点），而非仅监听全局Tab按键。以下是两种实现方式：

方式1：监听元素自身的focus/blur事件 #

直接监听目标元素的焦点变化，精准控制样式：

import { Component, ElementRef, Renderer2, HostListener } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  // 聚焦时添加样式（Tab或鼠标点击聚焦都触发）
  @HostListener('focus', ['$event'])
  onFocus(event: FocusEvent) {
    const target = event.target as Element;
    if (target.classList.contains('some-class')) {
      this.renderer.addClass(this.el.nativeElement, 'd-block');
    }
  }

  // 失焦时移除样式（Tab移出或鼠标点击其他区域都触发）
  @HostListener('blur', ['$event'])
  onBlur(event: FocusEvent) {
    const target = event.target as Element;
    if (target.classList.contains('some-class')) {
      this.renderer.removeClass(this.el.nativeElement, 'd-block');
    }
  }
}

方式2：严格监听Tab键的移出操作 #

如果仅需响应Tab键的移出行为，可监听全局keyup事件并判断焦点状态：

@HostListener('document:keyup.tab', ['$event'])
onKeyupHandler(event: KeyboardEvent) {
  const target = event.target as Element;
  // 若当前焦点元素不再是目标元素，移除样式
  if (!target.classList.contains('some-class')) {
    this.renderer.removeClass(this.test?.nativeElement, 'd-block');
  }
}

二、更优的实现方案 #

优先用CSS伪类（无需JS） #

如果需求只是聚焦时显示、失焦时隐藏，完全不需要编写JS逻辑，CSS的:focus伪类就能直接实现，这是最简洁高效的方式：

.some-class {
  display: none; /* 默认隐藏 */
}

.some-class:focus {
  display: block; /* 聚焦时显示 */
}

组件内逻辑控制的最优方式 #

若样式需作用于其他元素（非当前宿主元素），推荐通过ViewChild获取目标元素，再用Renderer2监听其焦点事件，避免全局事件的性能损耗：

import { Component, ViewChild, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('targetElement') targetElement!: ElementRef;
  @ViewChild('testElement') testElement!: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    // 监听目标元素聚焦
    this.renderer.listen(this.targetElement.nativeElement, 'focus', () => {
      this.renderer.addClass(this.testElement.nativeElement, 'd-block');
    });

    // 监听目标元素失焦
    this.renderer.listen(this.targetElement.nativeElement, 'blur', () => {
      this.renderer.removeClass(this.testElement.nativeElement, 'd-block');
    });
  }
}

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