导航栏下拉菜单不适用于 Angular 和 Bootstrap 4
Posted
技术标签:
【中文标题】导航栏下拉菜单不适用于 Angular 和 Bootstrap 4【英文标题】：Navbar drop-down menu not working with Angular and Bootstrap 4 【发布时间】：2018-08-09 21:03:05 【问题描述】：我正在使用 Angular 5 和 Bootstrap 4 开发一个 Web 应用程序，但我遇到了导航菜单栏下拉菜单的问题。我正在关注文档https://getbootstrap.com/docs/4.0/components/navs/，但我不知道为什么下拉菜单不起作用！
<header>
<div class = "row align-items-end nopadding">
<div class = "col-md-3" style = "background-color: blanchedalmond"><app-logo></app-logo></div>
<div class = "col-md-6">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link menu-item" href="#">Ligas</a>
</li>
<li class="nav-item">
<a class="nav-link menu-item" href="#">Gráficas</a>
</li>
<li class="nav-item">
<a class="nav-link menu-item" href="#">Artículos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>
<div class=" dropdown dropdown-menu">
<a class="dropdown-item menu-item" href="#">Equipos</a>
<a class="dropdown-item menu-item" href="#">Jugadoras</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
<div class = "col-md-3 right-content">
Right column
</div>
</div>
</header>
我做错了什么？
编辑我：
我已经通过 npm 添加 jquery 和 popper，更新 muy angular-cli.json 并重启服务器：
angular-cli.json：
当我加载页面时出现此错误：
Error in the source mapping: request failed with status 404
Resource URL: http://localhost:4200/ scripts.bundle.js
Sourcemap URL: bootstrap.min.js.map
安装 jquery 后，我得到了以下输出：
当我安装 popper 时，我得到了这个输出：
我做错了什么？
【问题讨论】：
它对我有用。您是否能够在 JSfiddle 等中重现该问题？ 如果您不使用 Angular 5，它可以工作，而 Angular 5 则无法工作。例如，您是否在标头组件中使用 Angular 5 测试过代码？ 【参考方案1】：首先使用命令行安装： npm install --save @ng-bootstrap/ng-bootstrap
添加这个： “./node_modules/bootstrap/dist/css/bootstrap.min.css” 在 styles 数组
内的 angular.json 文件中最后，在 app.module.ts 文件中 导入下拉模块 从 'ngx-bootstrap/dropdown' 导入 BsDropdownModule ; 然后在“import”部分添加模块：BsDropdownModule.forRoot()
【讨论】：
【参考方案2】：我遇到了同样的问题，我的解决方法是更改数据切换，在你的情况下，从：
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>
收件人：
<a class="nav-link menu-item dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>
【讨论】：
【参考方案3】：有用的是
-
将此添加到我的 angular.json
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]-
将此添加到 index.html 的标头标记中
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>【讨论】：
【参考方案4】：截至 2021 年 5 月 21 日，bootstrap 5.0.1 版本已经推出，这似乎是我遇到的问题。我切换回 4.6.0，一切又好了。
注意：如果您在 angular.json 中引用以下脚本和样式，则应该没问题。 bootstrap.bundle.min.js 已经绑定了 popper.js。
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
【讨论】：
【参考方案5】：我遇到了同样的问题并通过以下方式解决了它：
-
npm install bootstrap --save
在 styles.css 中添加了以下行
@import "~bootstrap/dist/css/bootstrap.min.css";-
在 index.html 中添加了以下行
<!doctype html>
<html lang="en">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<head>
<meta charset="utf-8">......................
【讨论】：
【参考方案6】：就我而言，问题是我没有使用角度特定的属性。 见：https://ng-bootstrap.github.io/#/components/dropdown/examples
ngbDropdownngbDropdownTogglengbDropdownMenu和ngbDropdownItem
我必须改变
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
到：
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link dropdown-toggle" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" ngbDropdownToggle>
Link
</a>
<ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="navbarScrollingDropdown">
<li ngbDropdownItem><a class="dropdown-item" href="#">Action</a></li>
<li ngbDropdownItem><a class="dropdown-item" href="#">Another action</a></li>
<li ngbDropdownItem><hr class="dropdown-divider"></li>
<li ngbDropdownItem><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
【讨论】：
这看起来是最 Angular 的方式。 为我工作，谢谢【参考方案7】：我遇到了同样的问题，但我设法找到了解决方案，如果您的项目有引导程序，那么简单的解决方案就是改变
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
到
<a class="dropdown-toggle" data-toggle="dropdown" href='target="_self"'>Page 1
<span class="caret"></span></a>
简而言之，将href="#" 更改为href='target="_self"'
【讨论】：
【参考方案8】：确保您已在根文件夹中安装 jquery
如果没有，则使用 NPM 安装 ---> npm install jquery --save
注意：如果您想在您的应用程序中使用引导程序，或者如果您已经在您的项目中使用，请确保在包含引导程序 javascript 文件之前包含 jQuery。 Bootstrap 的 JavaScript 文件需要 jQuery
转到 Angular CLI 项目文件夹根目录下的 angular.json 文件，找到 scripts: [ ] 属性，并包含 jQuery 的路径，如下所示：
"scripts": [ "node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
【讨论】：
【参考方案9】：我不允许对 WebDevBooster 的答案添加评论，所以我发布了一条新评论。 angular.json (angular-cli.json) 中的下一个声明就足够了：
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
propper.js 已经包含在 bootstrap.bundle.min.js 中：https://getbootstrap.com/docs/4.4/components/dropdowns/#overview
【讨论】：
bootstrap.bundle.min.js 是一个棘手的问题。我没有意识到这一点。谢谢。 这似乎目前不起作用。任何想法为什么？【参考方案10】：不要在脚本中添加 popper、jquery 依赖项，而是尝试安装 ng-bootstrap（在 https://ng-bootstrap.github.io 中查找文档）。 使用 ng-bootstrap 相对于添加 bootstrap、jquery 和 popper 脚本的优势 它不会膨胀你的包大小吗？出于这些原因，Angular 社区创建了 ng-bootstrap。 安装步骤：
npm install --save @ng-bootstrap/ng-bootstrap
安装后，您需要导入我们的主模块。
【讨论】：
如果您已经在使用像primeng这样的不同组件库但又想使用引导导航库，这将是一个问题。 在我从我的 Angular 项目中删除带有 npm 的引导程序，然后通过 ng-bootstrap 重新安装之前，我确实在使这个下拉菜单工作时遇到了很多麻烦。该组件的模板标记需要进行少量编辑才能将一些引导类转换为 ng 指令，然后它就可以完美地工作了。【参考方案11】：除了app.module.ts，您还需要在您放置导航条码的模块中导入模块MDBBootstrapModule.forRoot()。
示例： ../custom.module.ts
import MDBBootstrapModule from 'angular-bootstrap-md';
...
@NgModule(
imports: [
CommonModule,
MDBBootstrapModule.forRoot()
],
...
【讨论】：
【参考方案12】：您必须确保 popper.js 包含并加载到您的 Angular 应用程序中，因为这是 Bootstrap 4 中弹出或下拉的所有内容所必需的。
angular-cli.json 的相关部分如下所示：
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"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"
],
要安装 popper.js，请使用以下命令：
npm install popper.js --save
参考：https://www.npmjs.com/package/popper.js
【讨论】：
这通常应该在 bootstrap.min.js 之前立即加载查看这个问题中的 angular-cli.json：***.com/q/48362985/8270343npm install popper.js --save 是您所需要的：npmjs.com/package/popper.js
有效！！！我觉得我要哭了！！！ :) 非常感谢您的帮助！！！
注意：确保jQuery的引用在bootstrap.js之前。
就我而言， Dropdown 将 data-toggle 更改为 data-bs-toggle 开始正常工作。希望对您有所帮助。以上是关于导航栏下拉菜单不适用于 Angular 和 Bootstrap 4的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单