導航菜單下拉菜單不起作用Angular4 Bootstrap 3

Question

在我的Angular4應用程序中，我創建了一個標準導航欄。當屏幕尺寸減小時，會出現導航菜單下拉菜單。當點擊菜單下拉菜單時，（摺疊）鏈接不顯示。

問題：如何獲取用於Angular 4 + Bootstrap 3的菜單下拉菜單？

我創建了一個標準組件。這是模板文件：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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 routerLink="/search" class="navbar-brand">Brand-name</a> 
    </div> 

    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a routerLink="/search">Search</a></li> 
     <li><a routerLink="/edit">Edit</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a routerLink="/signup">Signup</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

當然，我讀了類似的問題和文章，但沒有人幫助我進一步。大多數是關於自舉而已，不能與角4

Answer 1

所有的答案到目前爲止演示如何打開下拉菜單。在選擇菜單項後，答案不會顯示如何摺疊該下拉菜單。

感謝Thomas Rundle的基本部分可以在following solution中找到。我添加了一些代碼。該header.component.ts是：

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent implements OnInit { 
    isIn : boolean = false; // store state 
    constructor() { } 
    ngOnInit() { 
    } 
    toggleState() { // click handler 
    let bool = this.isIn; 
    this.isIn = bool === false ? true : false; 
    } 
} 

模板header.component.html是：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" (click)="toggleState()"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> <!-- #1 --> 
     <a class="navbar-brand" routerLink="/page1">Project Manager</a> 
    </div> 
    <div class="collapse navbar-collapse in" [ngClass]="{ 'in': isIn }"> 
     <ul class="nav navbar-nav"> 
     <li><a role="tab" (click)="toggleState()" data-toggle="tab" routerLink="/page1">Page 1</a></li> 
     <li><a role="tab" (click)="toggleState()" data-toggle="tab" routerLink="/page2">Page 2</a></li> 
     </ul> 
    </div> <!-- #2 --> 
    </div> 
</nav> 

Answer 2

https://plnkr.co/edit/oSKnNWXNafbMjCiPwqrv?p=preview

，因爲你有目標=「＃導航欄」，你必須設定目標的ID導航欄爲它工作的結合。

<nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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 routerLink="/search" class="navbar-brand">Brand-name</a> 
      </div> 

      <div id="navbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a routerLink="/search">Search</a></li> 
        <li><a routerLink="/edit">Edit</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a routerLink="/signup">Signup</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

Answer 3

引導程序下拉顯示增加了一類開放<ul>元素下拉出現和關閉，您可以利用角指令到同一個行爲添加到組件。

應用下拉指令

import {Directive, HostListener, HostBinding} from '@angular/core'; 

    @Directive({ 
    selector: '[appDropdown]' 
    }) 
    export class DropdownDirective { 

    private isOpen:boolean = false; 

    @HostBinding('class.open') get opened(){ 
     return this.isOpen; 
    } 
    constructor() { } 

    @HostListener('click')open(){ 
     this.isOpen = true; 
    } 

    @HostListener('mouseleave')close(){ 
     this.isOpen = false; 
    } 

它堅持你UL <ul class="nav navbar-nav" appDropdown>

的工作Example Code