无法在 Angular 的 Bootstrap 4 中切换导航栏
Posted
技术标签:
【中文标题】无法在 Angular 的 Bootstrap 4 中切换导航栏【英文标题】:Can't Toggle Navbar in Bootstrap 4 in Angular 【发布时间】:2018-02-07 15:10:47 【问题描述】:为什么在使用 bootstrap 4 在 angular 4 中调整到移动屏幕时无法切换导航栏。我将它包含在脚本和样式中的 angular cli 中,即来自 bootstrap 的节点模块。我的代码中是否缺少某些内容?请检查以下。有什么不对?请帮忙
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-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>
.angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
package.json
"name": "dashboard2",
"version": "0.0.0",
"license": "MIT",
"scripts":
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
,
"private": true,
"dependencies":
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"bootstrap": "^4.0.0-beta",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"popper.js": "^1.12.5",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
,
"devDependencies":
"@angular/cli": "1.2.7",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
【问题讨论】:
如何在 Angular 应用中包含依赖项? @cwanjt。你能再检查一下我的 angular-cli 吗? 【参考方案1】:@Joseph,您似乎尚未安装引导程序(以及引导程序本身)的依赖项,以便导航栏切换正常工作。
如果您打开终端或命令行并导航到包含您的 package.json
文件的目录,请运行以下命令:
npm install --save jquery
npm install --save popper.js
npm install --save bootstrap@4.0.0-beta
这些命令将为您的项目安装必要的依赖项。他们在做什么是相当明确的,但是如果您需要刷新他们在做什么或他们如何工作,我建议查看位于here 的npm install
的文档。
安装后,您需要确保将它们包含在您的 .angular-cli.json 文件中,以便 Angular 应用可以使用它们。
【讨论】:
我只安装了 npm install --save bootstrap@4.0.0-beta 成功了吗?如果确实如此,那就太好了,并且您仍然需要项目中的其他两个,因为引导程序依赖于它们。您还需要将它们添加到您的 .angular-cli.json 文件中。 在 .angular-cli.json 脚本中,添加 bootstrap.min.js 的路径 这对我不起作用,因为我没有安装 popper.js。谢谢cwanjt。请注意,我的安装是“npm install --save popper.js”而不是“popperjs” 根据之前的评论,应编辑答案以显示“popper.js”而不是“popperjs”【参考方案2】:看起来您可能一直在查看 Bootstrap 中的 this 示例。我做到了,并且遇到了同样的问题。
问题是它不是一个有角度的例子,所以它不起作用。要使其工作,您必须使用 (click)
事件和变量。所以把你的模板改成
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarsExampleDefault" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></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="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-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>
如果您希望菜单默认折叠,您应该在您的类中将变量设置为 true(在组件的 .ts 文件中)public isCollapsed = true;
这是plunker
还有一件事;如果您的导航位于共享模块中,您必须记住在此处也导入 NgbCollapseModule。
也就是说,你的 shared.module.ts 应该是:
import NgModule from '@angular/core';
import NgbCollapseModule from '@ng-bootstrap/ng-bootstrap';
/*Plus all your other modules*/
@NgModule(
imports: [NgbCollapseModule],
declarations: [],
exports: []
)
export class SharedModule
【讨论】:
是的。这正是我一直在寻找的,虽然我试图避免使用 ng-bootstrap,但似乎这个解决方案比导入 popper 和 jQuery 效果更好。 适用于 bootstrap 4 和 angular 5。我创建了一个成员布尔变量isCollapsed
并在 ngOnInit()
中将其设置为 true,因此默认为折叠
这实际上解决了我的问题。这应该是正确的答案。您还设法摆脱了像 jquery 或 popper.js 这样的 JS 库,这些库在纯 Angular 应用程序中是不需要的。
这也真的很有帮助
这真的很有帮助!【参考方案3】:
此示例提供了汉堡包图标的切换功能(换句话说,如果它在响应模式下运行,则为整个导航栏)以及下拉菜单项的切换。
它使用 ng-bootstrap,但我宁愿使用原生 Bootstrap 导航栏支持,而不是做这个“黑客”!?
显然其他人也遇到了同样的问题:https://github.com/twbs/bootstrap/issues/24227
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ApplicationName</a>
<button class="navbar-toggler" type="button" (click)="toggleNavbar = !toggleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [ngbCollapse]="!toggleNavbar">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li ngbDropdown class="nav-item">
<a class="nav-link" id="navbarDropdownMenuLink" ngbDropdownToggle aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div ngbDropdownMenu aria-labelledby="navbarDropdownMenuLink">
<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>
</div>
</nav>
【讨论】:
感谢分享。它应该是 Angular 应用程序中的首选方式!赞一个!【参考方案4】:如果你想让 Angular 与 Bootstrap 4 一起工作而不使用 @ng-bootstrap,请参阅此 git repo 中的代码:https://github.com/fmorriso/Angular-bootstrap4-nav/tree/master/src/app/navigation
我在这件事上浪费了太多时间。你必须破解 Angular 才能让它工作;这不仅仅是版本不正确等问题。
【讨论】:
【参考方案5】:如上所述,您需要一个属性(例如 isShown,它最初是错误的) 然后使用
[ngClass]=" 'show': isShown "
这里
<div class="collapse navbar-collapse" [ngClass]=" 'show': isShown " id="navbarSupportedContent" >
链接上的点击事件确保在点击链接时菜单再次折叠
import Component, OnInit from '@angular/core';
@Component(
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
)
export class HeaderComponent implements OnInit
isShown:boolean = false;
constructor()
ngOnInit()
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" routerLink="/"><img src="/assets/logo.svg"></a>
<button #navbarToggler class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" (click)="isShown = !isShown" [attr.aria-expanded]="isShown" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [ngClass]=" 'show': isShown " id="navbarSupportedContent" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" (click)="isShown = false" routerLink="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="isShown = false" routerLink="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="isShown = false" routerLink="/imprint">Imprint</a>
</li>
</ul>
</div>
</nav>
【讨论】:
非常有用,竖起大拇指...不需要额外的库:) ...唯一缺少的东西,“动画”;( 这里不允许属性数据切换!?【参考方案6】:要使切换以角度工作,您只需做 4 件事
-
安装 ng boostrap
将切换点击监听器添加到导航栏开关
(click)="isCollapsed = !isCollapsed"
使用属性绑定到 aria-expanded,[attr.aria-expanded]="!isCollapsed"
这样当您单击时,该属性将被更改(真或假)
同样的方式使用属性绑定到 ngCollapse [ngbCollapse]="isCollapsed"
注意:不建议使用 JQuery
Collapse nav bar without using JQuery
【讨论】:
【参考方案7】:这对我有用!!!
现在我们可以在使用 bootstrap 4 以 4 角调整到移动屏幕时切换导航栏。
试试这个代码
app.component.html
<nav class="navbar navbar-expand-lg justify-content-between">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="navButton">
<i class="fa fa-bars"></i>
</button>
<div class="row">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item" *ngFor="let menu of mainmenu, let i = index">
<a class="nav-link" (click)="findIndex(i)" routerLink="/menu.href">menu.icon menu.text</a>
<ng-container *ngIf="menu.children && menu.children.length > 0">
<span class="d-block d-sm-none"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
</ng-container>
<ul class="sub_menu dropdown-menu" [ngClass]="active : isActive(i)" *ngIf="menu.children && menu.children.length > 0">
<li *ngFor="let sub_menu of menu.children"><a class="nav-link" routerLink="/sub_menu.href" (click)="closeMenu()"><img src="sub_menu.icon" class="nav-img" /> sub_menu.text</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
app.component.ts
closeMenu()
var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|android/i.test(navigator.userAgent);
if (isMobile)
document.getElementById('navButton').click();
【讨论】:
【参考方案8】:我不知道这是否仍然相关,但是当我遇到这个问题时帮助我的事情是停止实时服务器,然后重新编译应用程序并使用 ng serve 重新启动它。有时,当您在服务器运行时安装依赖项时,即使您插入了依赖项,angular.json 也看不到它们。也许对于未来的用户
【讨论】:
【参考方案9】:如果有人正在寻找一种动态切换导航栏的方法 您可以使用ViewChild 和模板变量来获取对按钮的引用,然后您可以触发点击事件:
HTML
<button #menu class="navbar-toggler d-lg-none" type="button"
data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
TS
import ViewChild, ElementRef from '@angular/core';
@ViewChild('menu') menu: ElementRef;
toggleMenu()
this.menu.nativeElement.click();
closeMenu()
const isMenuOpen = this.menu.nativeElement.getAttribute('aria-expanded') === 'true';
if (isMenuOpen)
this.menu.nativeElement.click();
我知道这不是这个问题的答案,但它非常相关并且可能会有所帮助。
【讨论】:
【参考方案10】:引导程序 - 4.4.1,Angular-cli:7.3.9
最简单的方法是在客户端入口点导入 js 包:
导入'bootstrap/dist/js/bootstrap.bundle';进入“polyfills.ts”文件
【讨论】:
【参考方案11】:试试这个效果很好
<nav class="navbar navbar-expand-md navbar-light">
<a>Home</a>
<button
class="navbar-toggler d-lg-none"
type="button"
data-toggle="collapse"
(click)="isShown=!isShown"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [ngClass]=" 'show': isShown ">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
对应的ts文件是
import Component from '@angular/core';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
)
export class AppComponent
// title = 'WebApp';
isShown = false;
【讨论】:
以上是关于无法在 Angular 的 Bootstrap 4 中切换导航栏的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap 4 导航栏不会在 Angular 4 中折叠
Angular Bootstrap 4 Navbar 不会切换和 navbar-dark 问题
如何在 Angular 中使用带有 SASS 的 Bootstrap 4