Угловой 5 удалить класс от братьев и сестер

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

Но для navbar, почему вы не используете <router-outlet> с routerLinkActive="active" для ваших ссылок, где это встроенная директива по умолчанию для этого использования в Angular.