Active Class не применяется к элементу хоста с помощью директивы

Question

Я пытаюсь создать директиву для прокрутки страницы при щелчке по меню и применить активный класс при прокрутке страницы.

Сначала я попробовал прокрутить страницу при нажатии на меню и его работа, но моя проблема похожа на активный класс не применяется правильно в главном элементе. Ниже моя строка кода

компонент

courses = [
    {label: 'JS', name: 'js',type:[
      {label:'Angular',name:'angular'},
      {label:'React Js',name:'reactjs'},
      {label:'Node Js',name:'nodejs'},
    ]},
  ]

. html

<ul *ngFor="let course of courses">
    <li>{{course.name}}</li>
  <ul *ngIf="course.type">
    <li *ngFor="let type of course.type" appScroll>
      {{type.name}}
    </li>
  </ul>
</ul>

директива

@Directive({
  selector: '[appScroll]'
})
export class ScrollDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostBinding('class.active') isActive: boolean
  @HostListener('click', ['$event'])
  onClick() {
    const parentNode = this.el.nativeElement.parentNode
    let node = parentNode.firstElementChild;
    while (node) {
      if (node !== this.el.nativeElement)
      {
        console.log(node)
        this.renderer.removeClass(node, 'active')
      }
        node = node.nextElementSibling;
    }

    //  for setting active class to current element
    this.isActive = true
  }

}

В первый раз его работа означает, что когда я нажимаю первый раз в каждом меню, он применяет активный класс к нажатому меню и удаляет активный класс из всех братьев и сестер (если есть), но при повторном нажатии активный класс не применяется

Я могу достичь с помощью приведенной ниже строки кода

this.renderer.addClass(this.el.nativeElement, 'active')

, но мне любопытно узнать, почему он работал в первый раз с this.isActive = true и не работал во второй время

Пример демонстрации

https://stackblitz.com/edit/angular-ivy-pcwunt?embed=1&file=src / app / scroll.directive.ts

Answer 1

Я вижу, что вы удаляете класс, используя Renderer2. Когда Angular удаляет класс из братьев и сестер, свойство isActive этого элемента не изменяется. Поэтому, когда вы щелкаете второй раз и далее, Angular думает, что не нужно обновлять шаблон, потому что ничего не изменилось.

Вместо использования HostBinding напишите this.renderer.addClass(this.el.nativeElement, 'active') в первой строке обработчик кликов.