【发布时间】：2020-05-17 19:52:09
【问题描述】：
我在我的 Angular 7 项目中添加了一个折叠的导航栏，但是当我按下按钮时，它没有显示菜单项。我试过改变风格。添加其他组件并将导航栏添加到组件。甚至尝试重新启动我的计算机以查看它是否会改变，但没有任何结果
在styles.scss
@import "~bootstrap/dist/css/bootstrap.css";
在 package.json 中
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"bootstrap": "^4.5.0",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
在 app.component.ts 中
<header>
<div style="text-align:center">
<h1>
Welcome to CV!
</h1>
</div>
</header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="nav2">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Index</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
</ul>
</div>
</nav>````
【问题讨论】：
标签： bootstrap-4 angular7 navbar