从附加到该类的所有主机上的指令中删除该类

Question

该指令很简单，要切换一个CSS类以突出显示单击事件时的菜单，我现在只想突出显示一个菜单，该行为是在导航到另一个菜单时突出显示所有菜单，我需要从上一个菜单中删除突出显示类，我该怎么做？

这是我的代码：

import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
  selector: '[appHighlightMenu]'
})
export class HighlightMenuDirective {
  constructor(private elem: ElementRef, private renderer: Renderer2) {
  }
  @HostListener('click') onClick() {
    this.highlight('menu-highlight');
  }
  private highlight(className: string) {
    this.renderer.addClass(this.elem.nativeElement, className)
  }
  private removeHighlight(className: string){
    this.renderer.removeClass(this.elem.nativeElement, className)
  }
}

.HTML

<div class="p-2 border-right menu"  appHighlightMenu routerLink="/unit-requests">
    <div class="flex-column">
        <div class="text-center"><i class="fa fa-users fa-2x"></i></div>
        <div class="text-center">Requests</div>
    </div>
</div>
<div class="p-2 border-right menu" appHighlightMenu routerLink="/search-requests">
     <div class="flex-column">
         <div class="text-center"><i class="fa fa-align-justify fa-2x"></i></div>
         <div class="text-center">Search</div>
     </div>
</div>

Answer 1

与其在每个元素上使用"appHighlightMenu"，不如为想要使用"appHighlightMenu"的所有元素创建一个父容器。然后，使用 angular 中的 click 事件，您可以获得单击元素的实例，然后使用 renderer2，您可以突出显示被单击的元素。希望有帮助。

Answer 2

试试这个：

private highlight(className: string) {
        $(this.elem.nativeElement).siblings().removeClass('className');
        this.renderer.addClass(this.elem.nativeElement, className)
    }