如何通过鼠标事件的指令在 Angular 中设置可见性答案

【问题标题】：How to set visibility in Angular from Directive on Mouse events如何通过鼠标事件的指令在 Angular 中设置可见性
【发布时间】：2021-11-21 02:08:01
【问题描述】：

我正在尝试处理鼠标事件中链接的可见性，当用户将鼠标悬停在链接上时，链接应该是可见的，并且在 mouseout 上应该隐藏链接。出于某种原因，我可以为元素添加隐藏样式，但是一旦元素被隐藏，我就无法将其更改为鼠标悬停时可见。

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

我的指令，

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

@Directive({
  selector: '[hideShowElement]'
})
export class HideShowDirective {

    @HostBinding('style.visibility') visibility: string;

  constructor(private elementr: ElementRef, private renderer: Renderer2) {
    
   }

    @HostListener('mouseover') 
    onMouseOver() {
        this.renderer.setStyle(this.elementr.nativeElement, 'visibility', 'visible');
    }
 
    @HostListener('mouseleave') 
    onMouseLeave() {
        this.renderer.setStyle(this.elementr.nativeElement, 'visibility', 'hidden');
    }
}

【问题讨论】：

我不想用颜色和禁用属性做一个技巧。我想隐藏它并显示它。

标签： angular angular-directive

【解决方案1】：

对于给定的问题还有一种解决方法，当用户将鼠标悬停在特定的 HTML 元素上时，您可以使用 matTooltip 显示链接。然后将（单击）方法附加到元素以重定向到该特定 URL。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

这不是可见性。请尝试使用 display 属性。显示属性值为 display:none 和 display:block

【讨论】：

同样的行为，我第一次可以在 mouseleave 事件上应用 NONE，但是当我做 mouseover 时，样式没有应用，因为此时元素已被删除。
好的，我知道你的实际问题
您可以将文本颜色设置为与背景颜色相同，我认为它适合您
所以行为看起来像隐藏并在鼠标悬停和鼠标离开时显示。
还将禁用属性与您的隐藏功能一起应用，这样用户将无法点击它们