Question

我正在尝试创建一个带角度的多个超链接的导航栏。我想在任何超链接的点击/悬停上添加“活动”类，并从其兄弟姐妹中删除“活动”类。我试图通过创建自定义指令来做到这一点。

这就是我所取得的成就。

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();
}

@HostListener('mouseleave') onMouseLeave() {

}

private activate() {
  this.renderer.addClass(this.element.nativeElement, 'active'); 
}

private deactivate(element: ElementRef) {
  console.log("Element: ", element);
}
}

我能够将活动类添加到元素中，但无法从兄弟姐妹中删除已存在的活动类。

提前致谢。

Answer 1

您尝试过removeClass吗？

 removeClass(className: string, element: any) {
   this.renderer.removeClass(element, className);
}

但是对于导航栏，为什么不对链接使用<router-outlet>和routerLinkActive="active"，在Angular中使用的默认内置指令在哪里。

Angular 5从兄弟姐妹中删除班级

1 个答案: