带有 Angular 6 的 Bootstrap 下拉菜单 [英] Bootstrap dropdown with Angular 6
问题描述
我正在尝试使用 Angular 6 在 Bootstrap 导航栏中创建一个下拉项.当我在线测试时,我的代码正在运行:
<li><a class="nav-link" href="#">Page2</a></li></nav>
但下拉菜单不适用于 Angular 6.我使用以下方法将 Bootstrap 与 Angular 结合使用:
ng 添加@ng-bootstrap/schematics
除了那个下拉项外,一切正常!
我之前遇到过同样的问题,我发现如下:
- html 应该与 container 类绑定>引导程序布局
- 下拉列表基于第三方库
Popper.js
构建,如 引导下拉菜单
据我所知,您没有参考所需的 javascript
即 util.js、bootstrap.js、popper.js
或缩小版本.
这里,我什么也没做,只是在索引文件中引用所需的javascript文件
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
我创建了一个导航组件并按照如下要求进行设计:
<!-- 这里的内容--><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="下拉菜单"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">分隔链接</a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></div
可以在这里找到工作演示.希望这对您有所帮助.
I'm trying to create a dropdown item in a Bootstrap navbar using Angular 6. My code is working when I test it online :
<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" data-toggle="dropdown">Page1</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Page1.1</a>
</div>
</li>
<li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>
But the dropdown does not work with Angular 6. I've used the following method in order to use Bootstrap with Angular :
ng add @ng-bootstrap/schematics
And everything works fine except for that dropdown item !
I have came across the same problem earlier and I found as below:
- html should be binded with the class
container
in bootstrap as mentioned in Bootstrap Layout - Dropdowns are built on a third party library
Popper.js
as mentioned in Bootstrap Dropdown
As far as I know from your problem that you haven't refer to the required javascript
i.e. util.js, bootstrap.js, popper.js
or minified version.
Here, I have done nothing much, just refer the required javascript files in the index file
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
And I created a nav component and design as required like this:
<div class="container">
<!-- Content here -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div
The working demo can be found here. Hope this helps you.
这篇关于带有 Angular 6 的 Bootstrap 下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!