角2応答ヘッダー - モバイルビューで展開/切り替えボタンが機能しない

Question

トグルボタンはモバイルビューで表示されますが、クリックできません。角度appDropdownでは、ドロップダウンボタンを定義するために使用されます。トグルボタンを修正する同様の方法はありますか？

ここで画像を表示することはできませんが、[管理]ドロップダウンボタンには別の問題があります。 <li>の上にカーソルを置くと色が灰色に変わります（「登録」など）。

href= "#"を追加すると、不要な色の変化はなくなりますが、クリックするとページ全体が更新されます。

<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> 

CSS：

がここにHTMLだ

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; 
} 

すべてのヘルプは大歓迎です。

Answer 1

ng-bootstrapを使用して実装されています。

ライブアクションの

<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> 

コンポーネントクラス内の変数以下の宣言

public isCollapsed = false; 

以下のようなHTMLを更新し、私のPlunker