Twitter bootstrap 导航菜单下拉菜单不工作角度4引导3

在我的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>

切换导航
品牌名称

搜寻
编辑


报名

当然，我读过类似的问题和文章，但没有一篇对我有任何帮助。大多数都是关于Boostrap的，而不是与angular4的组合

由于您有target=“#navbar”，因此必须将目标的id设置为navbar才能工作

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

切换导航
品牌名称

搜寻
编辑


报名

引导下拉列表向

元素添加一个打开的类，以便下拉列表显示和关闭，您可以使用角度指令向组件添加相同的行为

应用程序下拉指令

  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

工作

---

目前为止的所有答案都显示了如何打开下拉菜单。答案不会显示在选择菜单项后如何再次折叠下拉菜单

多亏了Thomas Rundle，基本部件可以在中找到。我添加了一些代码。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>

切换导航
项目经理

第1页
第2页

Bootstrap附带了一些用于折叠内容的jquery库。你进口了吗？是的，我将jquery.3.2..0.js和bootstrap.js插入index.html。那是正确的地方吗？我没有将标题html作为index.html的一部分，因为RouterLink无法工作。我应该通过angular cli的scripts标签导入它们吗？请说明我应该包括哪些内容。和一个单独的人一起工作似乎是个好方法。谢谢。当我尝试响应时，下拉列表不会在中大屏幕上消失。您可以在没有代码的情况下看到这种行为。因为这是一个常见的代码，你能帮我一点忙吗？谢谢。单击汉堡时，菜单打开。好啊问题-单击菜单项时，如何再次关闭它？@tjm1706我的代码有一个均匀的鼠标左键。您需要为此添加不同的事件。这本身就是一个新问题，因为您需要检查单击从何而来。单击菜单项才是真正的问题。我尝试了许多不同的方法。请帮忙。当然，这只适用于小屏幕，因为屏幕的大小有一个下拉菜单。@tjm1706我想，如果您想以角度方式实现它，您需要另一个相同的指令吗？你能给我一个解决办法吗？我想这对于angular开发者来说是一个非常普遍的问题。