如何在Angular中通过指令结合鼠标事件设置元素可见性

你遇到的核心问题很典型：当链接被设置为visibility: hidden后，虽然它仍然占据页面空间，但用户无法直观定位它的位置，而且鼠标很难精准悬停在这个不可见的元素上，自然触发不了mouseover事件来恢复可见性。

这里有两种简单有效的解决方案：

方案一：用CSS直接实现（最简洁） #

完全不需要自定义指令，利用CSS的父元素hover状态控制子元素显示：

/* 初始隐藏链接 */
td .link-danger {
  visibility: hidden;
}

/* 当鼠标悬停在单元格上时显示链接 */
td:hover .link-danger {
  visibility: visible;
}

这样用户只要把鼠标移到表格单元格内，链接就会自动显示，移出单元格则隐藏，逻辑简单且性能更好。

方案二：修改自定义指令，监听父元素事件 #

如果你坚持要使用Angular指令，可以把指令绑定到父元素（<td>）上，通过父元素的鼠标事件来控制子链接的显示状态：

修改后的HTML： #

<table class="table table-bordered">
  <caption style="caption-side: top; text-align: center;">Food Items</caption>
  <tbody>
    <tr *ngFor='let food of foods'>
      <td hideShowElement>
        <a [routerLink]="" class="link-danger" (click)='deleteFoodItem(food.id)'>DELETE</a>
      </td>
    </tr>
  </tbody>
</table>

修改后的指令代码： #

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

@Directive({
  selector: '[hideShowElement]'
})
export class HideShowDirective {
  private linkElement: HTMLElement | null = null;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    // 初始化时找到子元素中的链接
    this.linkElement = this.elementRef.nativeElement.querySelector('a.link-danger');
    // 默认隐藏链接
    this.linkElement && this.renderer.setStyle(this.linkElement, 'visibility', 'hidden');
  }

  @HostListener('mouseover') onMouseOver() {
    this.linkElement && this.renderer.setStyle(this.linkElement, 'visibility', 'visible');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.linkElement && this.renderer.setStyle(this.linkElement, 'visibility', 'hidden');
  }
}

这个方案的核心是把鼠标事件的监听对象换成了始终可见的表格单元格，用户只要悬停在单元格范围内，就能触发链接的显示，彻底解决了不可见元素无法触发鼠标事件的问题。

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