Html 导航栏下拉菜单不适用于 Angular 和 Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49055721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Navbar drop-down menu not working with Angular and Bootstrap 4
提问by José Carlos
I'm developing a web application with Angular 5 and Bootstrap 4 and I'm having problems with the nav menu bar dropdowns. I'm following the documentation https://getbootstrap.com/docs/4.0/components/navs/but I don't know why drop-down menu doesn't work!
我正在使用 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>
What am I doing wrong?
我究竟做错了什么？
Edit I:
编辑我：
I have added jquery and popper through npm, update muy angular-cli.json and restart the server:
我已经通过 npm 添加了 jquery 和 popper，更新了 muy angular-cli.json 并重新启动了服务器：
angular-cli.json:
角度cli.json：
And when I load the page I've got this error:
当我加载页面时，出现此错误：
Error in the source mapping: request failed with status 404
Resource URL: http://localhost:4200/ scripts.bundle.js
Sourcemap URL: bootstrap.min.js.map
When I have installed jquery I've got this output:
当我安装了 jquery 时，我得到了这个输出：
And when I hace installed popper I've got this output:
当我安装了 popper 时，我得到了这个输出：
What am I doing wrong?
我究竟做错了什么？
回答by WebDevBooster
You have to make sure that popper.jsis included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4.
您必须确保popper.js在您的 Angular 应用程序中包含并加载它，因为这是 Bootstrap 4 中弹出或下拉的所有内容所必需的。
Here's what the relevant part of your angular-cli.jsonshould look like:
以下是您的相关部分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"
],
To install popper.js use this command:
要安装 popper.js，请使用以下命令：
npm install popper.js --save
npm install popper.js --save
Reference: https://www.npmjs.com/package/popper.js
回答by Sergey Fasolko
I'm not allowed to add a comment to WebDevBooster's answer, so I posted a new one. The next declaration in angular.json (angular-cli.json) will be enough:
我不允许在 WebDevBooster 的回答中添加评论，所以我发布了一个新评论。angular.json (angular-cli.json) 中的下一个声明就足够了：
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
The propper.js has already been included in bootstrap.bundle.min.js: https://getbootstrap.com/docs/4.4/components/dropdowns/#overview
propper.js 已经包含在 bootstrap.bundle.min.js 中：https://getbootstrap.com/docs/4.4/components/dropdowns/#overview
回答by Alejandro E
Additional to app.module.ts, you need to import the module MDBBootstrapModule.forRoot()in the module where you are putting navbar code.
除了 之外app.module.ts，您还需要MDBBootstrapModule.forRoot()在放置导航栏代码的模块中导入模块。
Example:../custom.module.ts
例子：../custom.module.ts
import { MDBBootstrapModule } from 'angular-bootstrap-md';
...
@NgModule({
imports: [
CommonModule,
MDBBootstrapModule.forRoot()
],
...
回答by bharath pn
Instead of adding popper, jquery dependency in your scripts, try this instead you can install ng-bootstrap (look for documentation in https://ng-bootstrap.github.io). Advantage of using ng-bootstrap over adding scripts of bootstrap, jquery and popper is it will not bloatup your bundle size and for these reason angular community has created ng-bootstrap. Steps to install:
与其在脚本中添加 popper、jquery 依赖项，不如试试这个，您可以安装 ng-bootstrap（在https://ng-bootstrap.github.io 中查找文档）。使用 ng-bootstrap 比添加 bootstrap、jquery 和 popper 脚本的优势在于它不会使你的包大小膨胀，因此 angular 社区创建了 ng-bootstrap。安装步骤：
npm install --save @ng-bootstrap/ng-bootstrap- Once installed you need to import our main module.
npm install --save @ng-bootstrap/ng-bootstrap- 安装后，您需要导入我们的主模块。
回答by ManishSongara
make sure you have installed jquery in your root folder
确保你已经在你的根文件夹中安装了 jquery
if not then install using NPM ---> npm install jquery --save
如果没有，则使用 NPM 安装 ---> npm install jquery --save
Note: If you want to use bootstrap in your application, or if you already have in your project, make sure to include jQuery before including the bootstrap JavaScript file. Bootstrap's JavaScript file requires jQuery
go to the angular.json file at the root of your Angular CLI project folder, and find the scripts: [ ] property, and include the path to jQuery as follows:
注意：如果你想在你的应用程序中使用 bootstrap，或者如果你已经在你的项目中，请确保在包含 bootstrap JavaScript 文件之前包含 jQuery。Bootstrap 的 JavaScript 文件需要 jQuery
转到 Angular CLI 项目文件夹根目录下的 angular.json 文件，找到脚本：[ ] 属性，并包含 jQuery 的路径，如下所示：
"scripts": [ "node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
