Angular + Bootstrap 导航栏问题答案

【问题标题】：Angular + Bootstrap Navbar IssueAngular + Bootstrap 导航栏问题
【发布时间】：2017-08-17 14:04:14
【问题描述】：

我正在使用 Angular 4 和引导程序 3.3.7。我遇到的问题是，尽管导航栏按预期折叠成“汉堡包”，但汉堡包对用户点击没有反应。我在这里找到了一个非角度工作示例

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

但即使我用工作示例中的导航元素替换了导航元素，复制的导航栏汉堡包也没有响应。

这是我的 index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- index.html -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>

这是我的 html，其中包含复制的导航栏

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class='container main-container' >
    <router-outlet></router-outlet>
</div>

想法？

【问题讨论】：

你的问题到底是什么？你能提供一个plunker吗？
我希望汉堡包图标具有响应性，当我单击它时，我希望看到我的其他导航项显示/隐藏。接近安吉拉·潘（Angela Pan）的以下答案

标签： angular

【解决方案1】：

在 Angular 4 中，按钮应如下所示：

  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isCollapsed = !isCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>

注意（点击）部分是事件的新语法，不同于 Angular 1+。

而不是<div class="collapse navbar-collapse" id="myNavbar">，试试这个：<div class="collapse navbar-collapse" [ngbCollapse]="isCollapsed" >

在 nav.component.ts 文件中，声明一个名为“isCollapsed”的变量，并默认设置为 true。

如果您还没有这样做，请安装 ng-bootstrap。

npm install --save @ng-bootstrap/ng-bootstrap

在你的 app.module.ts 文件中，你需要 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 并在 NgModule 下的导入部分添加 NgbModule.forRoot()。

简而言之，Angular 4 正在使用此功能使汉堡按钮正常工作。 https://ng-bootstrap.github.io/#/components/collapse/examples

【讨论】：

我做了所有建议的更改，它几乎就在那里。汉堡图标不同，它不是 3 个水平条，它始终存在。我希望只在需要时才能看到它。我更接近了，谢谢！
顺便说一句，我使用的是引导程序 3.3.7 而不是 4。
你可以在这里看到结果djangularphil.herokuapp.com/records
嗨，我的应用程序中的汉堡图标仅在宽度变小时才会出现。它是3个单杠。但我看到你解决了你的问题。太好了！
解决了大部分问题，除了汉堡包图标的外观和可见时。你在使用引导程序 4 吗？