我在我的Angular 4项目中使用ng-bootstrap：
<navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a>
</li>
</ul>
</div>
</navbar>
导航栏就在那里，它反应灵敏，看起来工作正常。但是当导航栏折叠时，导航栏切换按钮不会切换导航栏，并且我找不到错误。
我最终做了这样的事情：
在 html 模板中我有以下代码：
<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<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"
(click)="toggleCollapsed()">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
......
</div>
</nav>
在组件中我有这个
export class NavComponent {
collapsed = true;
toggleCollapsed(): void {
this.collapsed = !this.collapsed;
}
}
非常简单且直接，
在
C:\Niagara\Vega\ncPortal\.angular-cli.json在脚本下，添加此行，或指向 node_modules 中的 bootstrap.js 文件，
"../node_modules/bootstrap/dist/js/bootstrap.js"
并重建您的应用程序，现在，不仅是切换，而且所有其他操作也将按预期工作。
正如评论中提到的以及 jmiguel77 的最佳答案
只是想分享一下，我也在 ng-bootstrap Github 文档上找到了类似的方法https://ng-bootstrap.github.io/#/components/collapse/examples
我用 [ngbCollapse]="isCollapsed" 代替。从我所看到的来看，两种方法都得出相同的结果。
这是我的代码：
//app-navbar.component.html
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">{{title}}</a>
<button class="navbar-toggler" type="button" (click)="toggleCollapsed()" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" ngToggler></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault" [ngbCollapse]="isCollapsed" >
<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 class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01" ngbDropdownMenu>
<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>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
//app-navbar.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './app-navbar.component.html',
styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
@Input() title: String;
isCollapsed = true;
toggleCollapsed(): void {
this.isCollapsed = !this.isCollapsed;
}
constructor() { }
ngOnInit() {
}
}
#you can use click method in your html and use router navigate in your type script.
#In HTML File
<a class="nav-link" (click)="onMenuClick('profile')">Profile </a>
#In Type Script file
onMenuClick(path) {
$('.navbar-toggler').click();
this.router.navigate(['/' + path]);
}
在 script 标签下的 Angular.json 文件中添加“./node_modules/jquery/dist/jquery.js”，它将起作用。
我想我可以分享对我有用的东西。
我有一些您可以考虑的要求；
...在我的 html 模板中 [header.component.html]
<nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a routerLink="/" class="navbar-brand">APP_NAME</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
(click)="collapsed = !this.collapsed"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
id="navbarSupportedContent"
[ngClass]="{ collapse: collapsed, 'navbar-collapse': true }"
>
<!-- right nav menus -->
<ul class="navbar-nav ml-auto">
<li routerLinkActive="active" class="nav-item">
<a routerLink="/LINK_1" class="nav-link"> lINK_1 </a>
</li>
<li routerLinkActive="active" class="nav-item">
<a routerLink="/LINK_2" class="nav-link"> LINK_2 </a>
</li>
</ul>
</div>
</div>
</nav>
...在我的 ts 组件内 [header.component.ts]
import { Component, OnInit} from "@angular/core";
@Component({
selector: "app-header",
templateUrl: "./header.component.html",
styleUrls: ["./header.component.css"],
})
export class HeaderComponent implements OnInit {
collapsed = true;
constructor() {}
ngOnInit() {}
}
我希望这有帮助。感谢您的反馈和建议。 :)
我在 Angular 10、Bootstrap 4.5 上也遇到了同样的问题。 经过两天检查安装和提供所有必要依赖项的所有可能性后，我按照 Wyatt Lansdale 提供的链接中的说明进行操作（https://ng-bootstrap.github.io/#/components/collapse/examples）。
只要我有 Bootstrap 文档中的汉堡包图标 (< span class="navbar-toggler-icon" >< /span >)，仍然没有区别，但是一旦我将其更改为汉堡包图标的 unicode 字符（& # 9 7 7 6 ；没有空格）问题就解决了！最终有效:)
正如 Sanish Joseph 提到的，即使批准的响应有效（作为解决方法），正确的解决方案是使用
angular.jsonangular-cli.jsonbootstrap.min.js由于缺少引导脚本，因此需要检查该配置文件中是否也缺少引导 CSS：
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]