Переключение класса приводит к исчезновению внутреннего html элемента

Question

У меня проблемы с переключением класса для элемента в моем компоненте. Из инспектора я вижу, что класс успешно переключается. Однако при нажатии #navbarToggle все внутри #navbarMenu удаляется и становится пустым списком. Я могу проверить это в инспекторе, так как все элементы списка просто исчезают.

У меня есть компонент navbar с html-страницей, состоящей из:

<nav>
    <span #navbarToggle>Toggle</span>

    <ul class="hidden" #navbarMenu>
        <li><a href="#">Home</a></li>
    </ul>
</nav>

И scss с простым объявлением:

.hidden {
    display: none;
}

И в моем файле компонентов ts:

import { Component, ViewChild, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({

  selector: 'app-navbar',

  templateUrl: './navbar.component.html',

  styleUrls: ['./navbar.component.scss']

})

export class NavbarComponent implements AfterViewInit {

  @ViewChild('navbarMenu') navbarMenu: ElementRef;
  @ViewChild('navbarToggle') navbarToggle: ElementRef;

  constructor(private renderer: Renderer2) {
  }

  ngAfterViewInit() {

    this.renderer.listen(this.navbarToggle.nativeElement, 'click', () => {

      this.renderer.selectRootElement(this.navbarMenu.nativeElement).classList.toggle('hidden');

    });

  }

}

Answer 1

Две вещи:

1) Проблема с переключателем прослушивания на ul заключается в том, что если есть только 1 li, и вы переключаете его, то из ul не останется ничего для щелчка.

2) Было бы намного лучше использовать встроенную структурную директиву Angular, например * ngIf или привязку класса.

Вот пример привязки класса stackblitz (где триггер не является ul): https://stackblitz.com/edit/angular-8lihrj

---

В документах привязка классов: https://angular.io/guide/template-syntax#class-binding

ngIf: https://angular.io/api/common/NgIf#syntax