Angular 2/4中实现鼠标悬停时显示与隐藏div的方法

嘿，这个需求在Angular 2和4里实现起来超简单，核心就是利用Angular的事件绑定和状态控制指令。我给你整理了几种常用的实现方式，两种版本通用哦：

这种方式会直接添加/移除DOM元素，适合不需要保留元素占位的场景。

首先在组件类里定义一个布尔变量来跟踪悬停状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-hover-demo',
  templateUrl: './hover-demo.component.html'
})
export class HoverDemoComponent {
  isHovered = false; // 初始状态为未悬停
}

然后在模板里绑定事件并控制目标div的显示：

<!-- 触发悬停的元素 -->
<div class="trigger" (mouseenter)="isHovered = true" (mouseleave)="isHovered = false">
  把鼠标移到我上面呀 🖱️
</div>

<!-- 需要显示/隐藏的div -->
<div *ngIf="isHovered" class="hover-content">
  哈哈，我出现啦！
</div>

如果需要保留元素在DOM中的位置（只是通过CSS隐藏），可以用[hidden]属性绑定，它本质是给元素加display: none样式。

组件类还是用同样的状态变量，模板改成这样：

<div class="trigger" (mouseenter)="isHovered = true" (mouseleave)="isHovered = false">
  再移过来试试~
</div>

<div [hidden]="!isHovered" class="hover-content">
  我用[hidden]控制显示，DOM一直都在页面上哦！
</div>

如果想把悬停逻辑封装在组件内部（比如整个组件被悬停时显示内容），可以用HostListener装饰器监听组件本身的鼠标事件：

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

@Component({
  selector: 'app-hover-component',
  template: `
    <div class="component-box">我是一个组件</div>
    <div *ngIf="isHovered" class="component-hover-content">
      你悬停在组件上啦！
    </div>
  `
})
export class HoverComponent {
  isHovered = false;

  @HostListener('mouseenter')
  onMouseEnter() {
    this.isHovered = true;
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.isHovered = false;
  }
}

划重点：Angular 2 vs Angular 4 #

其实这两个版本在实现这个功能上没有任何差异——核心的事件绑定语法、*ngIf结构指令、[hidden]属性绑定以及HostListener的用法，在Angular 2和4里是完全一致的，上面的代码可以直接在两个版本中运行。

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