Переключатель Navbar отображается, но я нажимаю на него, и он не показывает элементы Navbar - PullRequest
Новая
       15

Переключатель Navbar отображается, но я нажимаю на него, и он не показывает элементы Navbar

0 голосов
/ 03 июля 2019

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

Это мой html-код: (в конце отсутствует тег nav, я помещаю его здесь, но не обнаруживаю). 

<nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-md" role="navigation">
    <a class="navbar-brand ml-3 margin-items" href="#"><img src="../assets/GroupeRenault.png" alt="groupeRenault"></a>
    <button
        class="navbar-toggler collapsed"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="true"
        aria-label="Toggle navigation"
    >
        <span class="navbar-toggler-icon"></span>
    </button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav ml-auto" >
            <li class="nav-item mr-2 padding-items">
                    <a  style="color:#666" href="https://dda-localhost:4200/dashboard" >{{this.userLanguage}}</a>
                </li>
            <li class="nav-item ">
                <div
                    ngbDropdown
                    class="d-inline-block"
                >
                    <button
                        class="bNombre"
                        id="dropdownForm1"
                        ngbDropdownToggle
                    >
                       {{this.userName}}
                    </button>
                    <div ngbDropdownMenu aria-labelledby="dropdownForm1">
                        <button ngbDropdownItem (click)="this.logout()">Logout</button>
                    </div>
                </div>
            </li>
    </ul>
</div>

1 Ответ

0 голосов
/ 03 июля 2019

Просто внесите следующие изменения, т.е. просто добавьте или удалите класс с именем show при нажатии кнопки

component.ts 

 isNavbarMobile: boolean = false;

component.html 

     <nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-md" role="navigation">
            <a class="navbar-brand ml-3 margin-items" href="#"><img src="../assets/GroupeRenault.png" alt="groupeRenault"></a>
            <button  (click)="isNavbarMobile = !isNavbarMobile" class="navbar-toggler collapsed" type="button" >
                <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse" [ngClass]="{'show': isNavbarMobile}" id="navbarNavDropdown">

            <ul class="navbar-nav ml-auto" >
                    <li class="nav-item mr-2 padding-items">
                            <a  style="color:#666" href="https://dda-localhost:4200/dashboard" >{{this.userLanguage}}</a>
                    </li>
                    <li class="nav-item ">
                        <div  ngbDropdown class="d-inline-block" >
                            <button class="bNombre" id="dropdownForm1" ngbDropdownToggle >
                               {{this.userName}}
                            </button>
                            <div ngbDropdownMenu aria-labelledby="dropdownForm1">
                                <button ngbDropdownItem (click)="this.logout()">Logout</button>
                            </div>
                        </div>
                    </li>
              </ul>
         </div>
  </nav>
...