Dropodown, не работающий в navbar, используется как sidenav в Angular 6 - PullRequest
Новая
       32

Dropodown, не работающий в navbar, используется как sidenav в Angular 6

0 голосов
/ 20 октября 2018

Мой файл navbar.component.html, содержащий HTML-код 

<div class="container-fluid">
  <div class="navbar navbar-inverse navbar-fixed-left">
    <a class="navbar-brand" routerLink="/Home">
      <img [src]= "user_image"
        class="img-responsive img-circle" width="125" height="125" alt="">
    </a>
    <h1 class="font-weight-normal text-center text-white-50">{{user_name}}</h1>
    <ul class="nav navbar-nav">
      <li><a routerLink="/Profile"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
      <li><a routerLink="/Notification"><span class="glyphicon glyphicon-bell"></span> Notification <span class="badge count">{{getCount()}}</span></a></li>
      <li><a routerLink="/AddBooksForm"><span class="glyphicon glyphicon-book"></span> Add Books : Form</a></li>
      <li><a routerLink="/AddBooksFile"><span class="glyphicon glyphicon-file"></span> Add Books : File</a></li>
      <li class="dropdown"><a routerLink="#" class="dropdown-toggle" data-toggle="dropdown">Book Status</a>
        <ul class="dropdown-menu" role="menu">
          <li><a routerLink="#">Sub Menu1</a></li>
          <li><a routerLink="#">Sub Menu2</a></li>
          <li><a routerLink="#">Sub Menu3</a></li>
          <li class="divider"></li>
          <li><a routerLink="#">Sub Menu4</a></li>
        </ul>
      </li>
      <!-- <li><a routerLink="/Logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> -->
    </ul>
  </div>
  <a routerLink="/Logout"><div class="glyphicon glyphicon-log-out glyphiconSize float-right"></div></a>
  <a routerLink="/Logout"><div class="glyphicon glyphicon-log-out glyphiconSize count"></div></a>
  <div class="container">
    <div class="row">
      <ng-content></ng-content>
    </div>
  </div>
</div>

Мой файл navbar.component.css, содержащий CSS: 

.navbar-fixed-left {
    width: 200px;
    position: fixed;
    border-radius: 0;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 0%;
  }

   .navbar-fixed-left .navbar-nav > li { 
     float: none;  /*Cancel default li float: left */
     width: 200px; 
     margin-bottom: 0;
   } 


  .navbar-fixed-left .navbar-nav > li > .dropdown-menu {
    margin-top: -50px;
    margin-left: 140px;
  }

  .glyphiconSize {
    padding-top: 1%;
    padding-right: 0%;
    color: rgb(66, 63, 63);
    font-size: 35px;
}

ПримерКак выглядит вывод

Мой выпадающий список не работает на панели навигации выше код содержит все.Я использую Angular 6 Используется несколько переменных, пожалуйста, предположите, что значения приходят правильно.

...