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

问题描述

在Angular4应用中，我创建了一个标准的导航栏.当屏幕尺寸减小时，将显示导航菜单下拉菜单.单击菜单下拉菜单时，不显示(折叠)链接.

In my Angular4 app I created a standard nav bar. When the screen size decreases the nav menu dropdown appears. When clicking on the menu dropdown, the (collapsed) links are not shown.

问题:如何使Angular 4 + Bootstrap 3的菜单下拉菜单起作用?

Question: how can I get the menu dropdown working for Angular 4 + Bootstrap 3?

我创建了一个标准组件.这是模板文件:

I created a standard component. This is the template file:

<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无关.

Of course I read similar questions and articles, but none helped me any further. Most are about Boostrap only, not the combination with Angular 4.

推荐答案

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

All answers so far show how to open the dropdown menu. The answers don't show how to collapse that dropdown menu again after selecting on a menu item.

感谢Thomas Rundle，这些基本部分可以在以下解决方案.我添加了一些代码. header.component.ts是:

Thanks to Thomas Rundle the basic parts can be found in the following solution. I added some code. The header.component.ts is:

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

The template header.component.html is:

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

这篇关于导航菜单下拉菜单不起作用Angular4 Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！