Angular 2/4中如何通过函数为当前悬停元素添加类？

我来帮你搞定这个需求！其实在Angular里实现“仅给当前悬停元素加类”的效果有好几种简洁的方式，既能保证多个元素之间状态互不干扰，又能轻松复用。下面给你几种实用方案：

方案一：模板内直接绑定（最简洁，无需额外TS函数） #

这种方式不需要在组件类里写复杂逻辑，直接利用Angular的事件绑定和类绑定特性，每个元素维护自己的悬停状态：

修改你的HTML代码，给每个需要悬停效果的fieldset添加事件监听和类绑定：

<fieldset class="help-hover" 
          (mouseenter)="isHovered = true" 
          (mouseleave)="isHovered = false"
          [class.hover-active]="isHovered">
  <div class="question-wrapper">
    <label class="question" for="quoteFormTitle">Your title</label>
    <div class="answer">
      <select formControlName="quoteFormTitle" id="quoteFormTitle" class="chosen-select">
        <option value="" disabled>Choose a title...</option>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Miss">Miss</option>
        <option value="Ms">Ms</option>
        <option value="Doctor Male">Doctor - Male</option>
        <option value="Doctor Female">Doctor - Female</option>
      </select>
      <span class="tick-area"></span>
      <div class="error" *ngIf="quoteFormTitle.touched && quoteFormTitle.invalid">Please select a title.</div>
    </div>
  </div>
  <aside class="help">
    <p>Please select your title from the drop down list.</p>
  </aside>
</fieldset>

• 每个fieldset的isHovered是独立的局部变量，多个元素之间不会互相影响
• [class.hover-active]="isHovered"会在isHovered为true时自动给元素加上hover-active类
• 不需要在TS里写任何额外函数，除非你需要在悬停时触发其他逻辑

方案二：TS函数结合状态对象（适合需要扩展逻辑的场景） #

如果悬停时需要执行额外的TS逻辑（比如日志、数据请求等），可以用一个对象来跟踪每个元素的悬停状态：

首先在组件类里定义状态对象和处理函数：

// 用对象存储每个元素的悬停状态，key可以是元素的唯一标识
hoverStates: { [key: string]: boolean } = {};

helpHover(elementKey: string, isHovering: boolean) {
  this.hoverStates[elementKey] = isHovering;
  // 这里可以添加你需要的额外逻辑，比如：
  // console.log(`元素 ${elementKey} 悬停状态：${isHovering}`);
}

然后在HTML里给每个元素分配唯一标识，并绑定事件：

<!-- 第一个元素 -->
<fieldset class="help-hover" 
          (mouseenter)="helpHover('titleField', true)" 
          (mouseleave)="helpHover('titleField', false)"
          [class.hover-active]="hoverStates['titleField']">
  <!-- 原有内容 -->
</fieldset>

<!-- 第二个元素示例（复用逻辑） -->
<fieldset class="help-hover" 
          (mouseenter)="helpHover('ageField', true)" 
          (mouseleave)="helpHover('ageField', false)"
          [class.hover-active]="hoverStates['ageField']">
  <!-- 第二个元素的内容 -->
</fieldset>

这种方式的好处是可以统一管理所有元素的悬停状态，方便后续扩展。

方案三：封装成可复用组件（适合大量复用场景） #

如果这个悬停效果需要在项目中很多地方使用，推荐封装成独立组件，彻底实现复用：

创建一个HoverHelpComponent：

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

@Component({
  selector: 'app-hover-help',
  template: `
    <!-- 用ng-content插槽传递原有内容 -->
    <ng-content></ng-content>
  `,
  styles: [`
    /* 定义悬停时的样式 */
    :host.hover-active {
      border-color: #2196F3;
      /* 其他你需要的样式 */
    }
    :host .help {
      display: none;
    }
    :host.hover-active .help {
      display: block;
    }
  `]
})
export class HoverHelpComponent {
  // 绑定宿主元素的hover-active类
  @HostBinding('class.hover-active') isHovered = false;

  // 监听宿主元素的鼠标进入事件
  @HostListener('mouseenter') onMouseEnter() {
    this.isHovered = true;
  }

  // 监听宿主元素的鼠标离开事件
  @HostListener('mouseleave') onMouseLeave() {
    this.isHovered = false;
  }
}

然后在需要的地方使用这个组件：

<app-hover-help>
  <fieldset class="help-hover">
    <!-- 原有内容 -->
  </fieldset>
</app-hover-help>

每个app-hover-help组件都有独立的悬停状态，完全隔离，而且样式和逻辑都封装在组件内部，维护起来非常方便。

最后补充：CSS样式示例 #

记得在你的全局样式或组件样式里定义hover-active类的效果，比如：

.help-hover.hover-active {
  /* 比如改变边框颜色 */
  border: 1px solid #2196F3;
}
.help-hover .help {
  /* 默认隐藏帮助内容 */
  display: none;
}
.help-hover.hover-active .help {
  /* 悬停时显示帮助内容 */
  display: block;
}

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