Bootstrap 下拉菜单在 Angular 8 项目中不起作用

Question

我已经安装了以下软件包：

npm install --save bootstrap@3
npm install --save popper.js angular-popper
npm install jquery --save

并按此顺序在angular.json文件中添加样式和脚本：

        "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

然后就照着官方的例子：

<div class="container headerComponent min-height-header">
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
</div>

样式似乎正确显示，但插入符号未显示，点击时没有任何反应。

浏览器或开发者工具中没有错误。

然而我已经意识到，在开发者工具的源标签中，只有 boostrap.min.css 是通过 node_modules 包含的。

我现在唯一的解决方案是在 index.html 的标题中添加链接，如下所示：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 1

那是因为您的下拉菜单 div 上没有 aria-labelledby 属性，下拉按钮上没有 id 属性。我在下面写正确的版本：

<div class="container headerComponent min-height-header">
<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" id="dropdownMenuButton" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

Answer 2

在 index.html 的标头中添加链接。你的问题会解决的

 <!-- BootStrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <!-- JQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <!-- Popper --> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- BootStrap JS -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 3

下拉菜单的解决方案是有

数据-bs-toggle="dropdown"

而不是

data-toggle="dropdown"

Answer 4

Use bootstrap.bundle.min.js or be sure you have Popper.js in your dependencies

like in angularjson -
"scripts": ["node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"] 

Answer 5

（我知道这个问题是针对 Angular 8 和 bootstrap 4 的，但这是我在浅层搜索中找到的最好的线程）

使用 Bootstrap 5 和 Angular 12 为我提供有效的解决方案。

请注意，当您在 angular.json 中进行更改时，您必须重新启动服务器（即“npm start”）

1. 在 angular.json 中添加“node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”> build.options.scripts[]
2. 确保您的按钮元素中有“data-bs-toggle="dropdown"'，正如@isabel-vallejo-gomez 所述

我的设置：

请注意，您不需要将 popper.js 作为依赖项安装，它捆绑在 boostrap.bundle.min.js 中

"dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "bootstrap": "^5.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

在 angular.json 中

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AngularRecipesApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          },

在你的 html 中

来自 bootstrap 5 文档https://getbootstrap.com/docs/5.0/components/dropdowns/#single-button

<!-- note: without the  'data-bs-toggle="dropdown"' dropdown will not work , as mentioned by @isabel-vallejo-gomez -->
<div class="dropdown">  
  <button 
    class="btn btn-secondary dropdown-toggle"
    type="button"  
    data-bs-toggle="dropdown"
    aria-expanded="false"
   >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Answer 6

只需使用 data-bs-toggle="dropdown" 而不是 data-toggle="dropdown"。

参考代码-

    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>