[英]Bootstrap dropdown not working in angular 8 project
我已经安装了以下软件包:
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>
那是因为您的下拉菜单 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>
在 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>
下拉菜单的解决方案是有
数据- bs -toggle="下拉"
代替
数据切换=“下拉”
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"]
(我知道这个问题是针对 Angular 8 和 bootstrap 4 的,但这是我在浅层搜索中找到的最好的线程)
使用 Bootstrap 5 和 Angular 12 为我工作的解决方案。
请注意,当您在 angular.json 中进行更改时,您必须重新启动服务器(即“npm start”)
我的设置:
请注意,您不需要将 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>
只需使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.