Угловой 5 удалить класс от братьев и сестер - PullRequest
Новая
       20

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

0 голосов
/ 16 мая 2018

Я пытаюсь создать навигационную панель с несколькими гиперссылками в угловом формате. Я хочу добавить класс «активный» при клике / наведении курсора на любую из гиперссылок и удалить «активный» класс из его братьев и сестер. Я пытаюсь сделать это путем создания пользовательской директивы.

Это то, чего я достиг. 

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

Я могу добавить активный класс к элементу, но не могу удалить уже существующий активный класс из братьев и сестер.

Заранее спасибо.

1 Ответ

0 голосов
/ 04 июля 2018

Вы пробовали removeClass? 

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

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

...