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>

当然，我读过类似的问题和文章，但没有人帮助我。大多数只是关于Boostrap，而不是与Angular 4的组合。

Answer 1

Bootstrap Drop down添加了一个对<ul>元素打开的类，用于显示和关闭下拉列表，您可以使用Angular Directives将相同的行为添加到Component。

App Dropdown Directive

  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

Answer 2

到目前为止，所有答案都显示了如何打开下拉菜单。答案并未显示如何在选择菜单项后再次折叠该下拉菜单。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="https://www.google.com/">

<div class="panel_div">
Some Text
  <div class="small_round_main_div">
    <div class="small_round_inner_div"></div>
    <div class="common_cateogory_status_edit_div fadeIn animated" >
         <ul>
             <li><span>Option 1</span></li>
         </ul>
    </div>
  </div>
</div>
</a>

模板header.component.html是：

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

Answer 3

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

因为你有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>

导航菜单下拉列表不起作用Angular4 Bootstrap 3

3 个答案: