导航菜单下拉菜单不起作用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