Angular12 -引导下拉列表中的问题

Question

我正在尝试这个示例引导下拉代码。没有错误，但我的下拉列表不起作用，我已经安装了jquery-popper、jquery和but 5。

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" 
id="dropdownMenuButton1" 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>

这就是我的angular.json的样子

`        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/deeppurple- 
          amber.css",
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "node_modules/slick-carousel/slick/slick.scss",
          "node_modules/slick-carousel/slick/slick-theme.scss"

        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/slick-carousel/slick/slick.min.js"
        ]`

我还在脚本数组中包含了"node_modules/@popperjs/core/dist/umd/popper.min.js"，，并尝试过，但什么也没有发生。我是不是漏掉了什么

Answer 1

您使用的是什么版本的引导程序？如果您使用的是v5，则不应该导入jQuery，因为Bootstrap在其最新版本中删除了jQuery。

我们的最新版本，Bootstrap 5，重点是改进v4的代码库，尽可能少进行重大的破坏更改。我们改进了现有的特性和组件，取消了对旧浏览器的支持，放弃了常规JavaScript的JavaScript，并将CSS自定义属性等更加友好的技术作为工具的一部分。

(取自关于Page的引导)

对于某些组件(例如Popover、工具提示)，您将需要Popper.js。请确保将引导和Popper.js都传递到脚本部分，或者只包含包含Popper.js的完整引导包，如下所示：

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
  // other script files ...
],

您还可以使用捆绑包的精简版本([...].bundle.min.js)。