Angular 5自定义指令问题：导航栏高亮时移除同级元素active类

嗨，我来帮你搞定这个导航栏的active类切换问题！你现在的指令已经能给当前元素添加active类，但缺少移除同级元素active类的逻辑，我们只需要在activate方法里补上这部分处理就可以了。

核心思路 #

要实现点击/悬停时的active类切换，需要两步：

1. 找到当前元素的父容器，获取所有同级导航项元素
2. 遍历这些同级元素，移除它们的active类，再给当前元素添加该类

修改后的完整指令代码 #

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

@Directive({ 
  selector: '[AppHighlightActiveMenu]' 
})
export class HighlightMenuDirective { 
  constructor(private element: ElementRef, private renderer: Renderer2) { }

  // 监听鼠标悬停事件
  @HostListener('mouseenter') onMouseEnter() {
    this.activate();
  }

  // 监听点击事件（按需添加，实现点击也触发active切换）
  @HostListener('click') onClick() {
    this.activate();
  }

  // 可选：鼠标离开时移除当前元素的active类（取消注释即可启用）
  // @HostListener('mouseleave') onMouseLeave() {
  //   this.renderer.removeClass(this.element.nativeElement, 'active');
  // }

  private activate() {
    // 获取当前元素的父容器
    const parentElement = this.element.nativeElement.parentElement;
    if (!parentElement) return;

    // 将父容器的子元素转为数组，方便遍历操作
    const siblingElements = Array.from(parentElement.children);

    // 遍历所有同级元素，移除active类
    siblingElements.forEach(sibling => {
      this.renderer.removeClass(sibling, 'active');
    });

    // 给当前悬停/点击的元素添加active类
    this.renderer.addClass(this.element.nativeElement, 'active');
  }
}

代码细节解释 #

• 获取父容器：通过parentElement拿到当前导航项的父节点，确保能精准找到所有同级导航元素
• 遍历同级元素：用Array.from将DOM元素集合转为数组，再逐个调用removeClass清除active类，避免多个元素同时高亮
• 添加当前元素高亮：最后给目标元素加上active类，保证它成为当前选中状态
• 点击事件扩展：额外添加了click事件监听，这样点击导航项也能触发active切换，更符合常见导航栏的交互习惯
• 可选的离开处理：如果需要鼠标离开时取消当前元素的高亮，可以取消mouseleave监听的注释

使用结构参考 #

确保你的导航栏是父容器包裹所有导航项的结构，这样指令才能正确识别同级元素：

<nav>
  <a href="#" AppHighlightActiveMenu>首页</a>
  <a href="#" AppHighlightActiveMenu>产品</a>
  <a href="#" AppHighlightActiveMenu>关于我们</a>
</nav>

这样修改后，就能实现悬停或点击任意导航项时，自动切换active类的效果啦！

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