Bootstrap 4导航栏在Angular4中不会崩溃
我在一个Angular 4项目中使用Bootstrap 4和Ng-Bootstrap，
我这样链接了我的bootstrap.css -cli.json中的que
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],并将NgbModule导入到我的app.module中，如下所示
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }我制作了一个导航栏，从bootstrap网站复制文档，并添加了ng-bootstrap中的切换组件(它工作得很好)，代码如下
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li>
<div ngbDropdown class="d-inline-block">
<div class="nav-link" id="dropdownBasic1" ngbDropdownToggle>Toggle
dropdown</div>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>当我缩小窗口时，问题开始了，当我按下折叠导航栏的按钮时，它就不起作用了。
我尝试安装并链接jquery和popper的js文件以及bootstrap文件，但仍然不起作用，实际的angular-cli.json如下所示
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/jquery/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],我做错了什么？
回答 3
Stack Overflow用户
发布于 2017-11-02 06:28:54
要使用angular，您需要此修复程序
首先在您的类public navbarCollapsed = true;中定义它
然后按下你的按钮
<button class="navbar-toggler" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>此外，您还需要将此代码添加到折叠div
<div class="collapse navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarSupportedContent"> 现在你不需要jquery、popper或bootstrap.js了
你可以在here上找到关于这个问题的更多信息。
还可以查看ng-bootstraps工作演示页面代码link。
Stack Overflow用户
发布于 2018-06-01 06:40:11
我也有同样的问题，我使用了普通的bootstrap 4而不是ng-bootstrap，这样我就不需要在app.module文件中添加任何模块了。它起作用了。下面是添加到angular.json (angular v6)和bootstrap 4+的脚本：
"scripts": ["../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]对于CSS，我更喜欢使用Scss版本，所以它是这样的。
"styles": [
"src/styles.scss",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
并将引导程序导入到style.scss文件中
@import "~bootstrap/scss/bootstrap.scss";
干杯!JK
Stack Overflow用户
发布于 2017-11-02 05:13:46
查找编译后的类，可能会得到错误的版本。我在col offset-#类中遇到了类似的问题，问题是这个类在那个版本中不存在。也许是同样的问题
这是路径..\node_modules\bootstrap\dist\js这里有两个文件bootstrap.js和bootstrap.min.js
在bootstrap.js中找到nav类。如果找不到，请查找其他Bootstrap存储库。
祝好运。
https://stackoverflow.com/questions/47063068
复制相似问题