Angular 2 Responsive Header - Erweitern/Umschalten-Schaltfläche funktioniert nicht in der mobilen Ansicht

Question

Die Umschaltfläche erscheint in der mobilen Ansicht, aber es ist nicht anklickbar. Im Winkel appDropdown wird eine Dropdown-Schaltfläche definiert. Gibt es einen ähnlichen Ansatz, um die Umschalttaste zu reparieren?

Leider kann ich hier keine Bilder anzeigen, aber es gibt ein anderes Problem mit der Dropdown-Schaltfläche "Administration". Die Farbe wird grau, wenn ich den Mauszeiger über den internen <li> (wie "Registrierung" ...) bewege.

Durch Hinzufügen von href= "#" wird die unerwünschte Farbänderung entfernt, jedoch wird dadurch die gesamte Seite aktualisiert, wenn darauf geklickt wird.

Hier ist der HTML:

<nav class="navbar navbar-webmaster"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" appDropdown class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" [routerLink]="['/']">Title</a> 
    </div> 

    <div class="collapse navbar-collapse" id="navbar"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Sublime<span class="sr-only"></span></a></li> 
      <li class="dropdown" appDropdown *ngIf="userService.isAdmin"> 
     <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a [routerLink]="['/register']">Registration</a></li> 
     <li><a>Other Admin Stuff</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a>Another Admin Stuff</a></li> 
     </ul> 
    </li> 
     </ul> 
     <form class="navbar-form navbar-right search-form" role="search"> 
      <input type="text" class="form-control" placeholder="Search" /> 
     </form> 
    </div> 

</div> 

Die CSS:

nav.navbar-webmaster { 
    background: #00547E; 
} 

nav.navbar-webmaster a { 
    color: #fff; 
} 

nav.navbar-brand :hover { 
    color: #337ab7; 
} 

nav.navbar-webmaster ul.navbar-nav a:hover, 
nav.navbar-webmaster ul.navbar-nav a:visited, 
nav.navbar-webmaster ul.navbar-nav a:focus, 
nav.navbar-webmaster ul.navbar-nav a:active { 
    background: #0d3a51; 
} 

nav.navbar-webmaster ul.navbar-nav a:hover { 
    border-color: #337ab7; 
} 

nav.navbar-webmaster li.divider { 
    background: #ccc; 
} 

nav.navbar-webmaster button.navbar-toggle { 
    background: #999; 
    border-radius: 2px; 
} 

nav.navbar-webmaster button.navbar-toggle:hover { 
    background: #999; 
} 

nav.navbar-webmaster button.navbar-toggle>span.icon-bar { 
    background: #fff; 
} 

nav.navbar-webmaster ul.dropdown-menu { 
    border: 0; 
    background: #fff; 
} 

nav.navbar-webmaster ul.dropdown-menu>li>a { 
    color: #444; 
} 

nav.navbar-webmaster ul.dropdown-menu>li>a:hover { 
    background: #00547E; 
    color: #fff; 
} 

Jede Hilfe wird sehr geschätzt.

Answer 1

Implementiert mit ng-bootstrap. Update html wie unten

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Logo</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar" [ngbCollapse]="isCollapsed"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Deklarieren unter Variable in Komponentenklasse

public isCollapsed = false; 

Für Live-Action, besuchen Sie mein Plunker