使用 Bootstrap 折叠的导航栏在 Angular 中不起作用答案

【问题标题】：Navbar collapse with Bootstrap doesn't work in Angular使用 Bootstrap 折叠的导航栏在 Angular 中不起作用
【发布时间】：2018-09-23 19:07:04
【问题描述】：

我在区块链之上创建了一个 Angular 4 应用程序。它必须是响应式的。用于折叠和展开导航栏的汉堡按钮不起作用。

这是代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" [routerLink]="['/home']">I-Talent</a>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">

这是我的 angular-cli：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "demo-simple"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": ["../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

这是我的 index.html：

<!--  Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
        See LICENSE in the source repository root for complete license information. -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Microsoft Graph Connect sample</title>
  <base href="/">

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

</head>
<body>
<app-root></app-root>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>
</body>
</html>

如您所见，我在所有可能的地方都添加了 jQuery，但无济于事。

有什么帮助吗？

提前致谢！

【问题讨论】：

任何控制台错误？可以发minimal reproducible example 吗？
您好，没有控制台错误。你的例子是什么意思？它只是一个带有汉堡按钮的导航栏，不起作用。
我的意思是在 stackblitz 上重现它，这样我们就可以测试行为。现在我在您的代码中没有看到任何问题，您导入了样式、脚本以及引导程序所需的所有内容。所以你应该做一个例子来证明它不起作用。
你也需要popper.js。阅读getting started docs。
我推荐使用 ng-bootstrap，这是 Bootstrap 4 的 Angular 实现。看看 this answer。

标签： jquery angular twitter-bootstrap collapse

【解决方案1】：

根据我对您原始帖子的评论，问题是您的 data-target 值与您为下拉菜单指定的实际 id 不匹配。

如果您的目标是#navbarSupportedContent，如下代码所示：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

那么您的.collapse 包装器必须具有相同的id：

<div class="collapse navbar-collapse" id="navbarSupportedContent">

您目前在哪里使用navbarNav

【讨论】：