Angular 4: не удается щелкнуть раскрывающееся меню

Question

Я надеюсь, что это правильный вопрос. Если нет, пожалуйста, предложите, как я могу улучшить.

Я наконец-то смог создать пример проекта в Angular и загрузил его в stackblitz. На самом деле у меня есть другие вопросы, но до этого я не уверен, почему я не могу нажать на выпадающее меню в stackblitz. Я могу нажать «Оповещение» и «Конфигурация» в панели навигации на моем локальном компьютере. Может кто-нибудь, пожалуйста, помогите мне в этом. У меня мало знаний о том, как работает стекблиц. Если приведенный ниже стек не работает, пожалуйста, дайте мне знать. Это первый раз, когда я разрабатываю Angular, и впервые я создаю проект в любом онлайн-редакторе.

https://stackblitz.com/edit/github-1b3r3r-3mhncg

Answer 1

Я исправил несколько меню (Alert, Configuration и burger menu): https://stackblitz.com/edit/github-1b3r3r-axdv2u

Шаг 01: переключение отображения / скрытия меню

<button class="navbar-toggler" type="button" ... (click)="showMenu=!showMenu;">
        <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarCollapse" [class.collapse]="!showMenu">
...
</div>

Шаг 02: Скрыть меню при использовании щелчка в любом месте документа. импортировать {Component, OnInit, HostListener} из '@ angular / core'; ...

    @HostListener('document: click', ['$event'])
    onClick(ev) {
      if(ev.target.classList.contains("navbar-toggler")) { 
        this.reset(true, false, false);
      }
      if(ev.target.classList.contains("navbar-alert")) { 
        this.reset(false, true, false);
      }
      if(ev.target.classList.contains("navbar-config")) { 
        this.reset(false, false, true);
      }
    }

    reset(showMenu, shoeAlert, showConfig) {
      this.showMenu = showMenu;
      this.showAlert = shoeAlert;
      this.showConfig = showConfig;
    }