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

而不是使用＆＃39; appHighlightMenu＆＃39;在每个元素上，为您想拥有的所有元素创建一个父容器＆app; appHighlightMenu＆＃39;上。然后使用angular中的click事件，您可以拥有单击元素的实例，然后使用renderer2，您可以突出显示单击的元素。希望有所帮助。

Answer 2

试试这个：

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

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

2 个答案: