Angular指令问题：仅保留当前菜单高亮，移除其他宿主的高亮类

问题分析 #

你遇到的核心问题是每个appHighlightMenu指令实例都是独立运作的，当点击某个菜单时，该指令只会给自身元素添加高亮类，但无法感知其他菜单指令的状态，导致旧的高亮类不会被自动移除。要实现“仅当前菜单高亮”，需要一个全局的状态管理器来跟踪激活的菜单元素。

推荐解决方案：使用共享服务管理状态 #

这种方法符合Angular的组件/指令通信最佳实践，通过一个共享服务来保存当前激活的菜单元素，点击新菜单时先移除旧元素的高亮类，再给当前元素添加。

步骤1：创建共享服务 #

首先创建一个服务来跟踪当前激活的菜单元素：

import { Injectable } from '@angular/core';
import { ElementRef } from '@angular/core';

@Injectable({
  providedIn: 'root' // 全局单例服务
})
export class MenuHighlightService {
  // 保存当前激活的元素引用
  currentActiveElement: ElementRef | null = null;
}

步骤2：修改HighlightMenuDirective指令 #

注入刚才创建的服务，在点击事件中更新激活状态：

import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
import { MenuHighlightService } from './menu-highlight.service';

@Directive({
  selector: '[appHighlightMenu]'
})
export class HighlightMenuDirective {
  // 定义高亮类名（可根据实际需求修改）
  private readonly highlightClass = 'menu-highlight';

  constructor(
    private elem: ElementRef,
    private renderer: Renderer2,
    private highlightService: MenuHighlightService
  ) { }

  @HostListener('click') onClick() {
    // 1. 移除之前激活元素的高亮类
    if (this.highlightService.currentActiveElement) {
      this.renderer.removeClass(
        this.highlightService.currentActiveElement.nativeElement,
        this.highlightClass
      );
    }

    // 2. 给当前元素添加高亮类
    this.renderer.addClass(this.elem.nativeElement, this.highlightClass);

    // 3. 更新服务中的当前激活元素
    this.highlightService.currentActiveElement = this.elem;
  }
}

步骤3：添加高亮样式 #

在全局样式文件（比如styles.css）中定义高亮类的样式：

.menu-highlight {
  background-color: #e9ecef;
  border-left: 3px solid #007bff;
  /* 可根据UI需求调整其他样式 */
}

步骤4：使用指令 #

在菜单元素上直接使用appHighlightMenu指令即可：

<ul>
  <li appHighlightMenu>菜单1</li>
  <li appHighlightMenu>菜单2</li>
  <li appHighlightMenu>菜单3</li>
</ul>

备选方案：DOM查询（适合简单场景） #

如果你的菜单结构很简单，也可以通过DOM查询找到所有带指令的元素，移除它们的高亮类，再给当前元素添加。这种方法不依赖服务，但耦合性较高：

// 修改指令中的onClick方法
@HostListener('click') onClick() {
  // 找到所有带有appHighlightMenu指令的元素
  const allMenuElements = document.querySelectorAll('[appHighlightMenu]');
  
  // 移除所有元素的高亮类
  allMenuElements.forEach(el => {
    this.renderer.removeClass(el, this.highlightClass);
  });

  // 给当前元素添加高亮类
  this.renderer.addClass(this.elem.nativeElement, this.highlightClass);
}

这种方法的缺点是直接操作DOM，当菜单元素动态生成时可能失效，所以还是推荐使用共享服务的方式。

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