我在使用Bootstrap和Angular 4时，遇到了下拉菜单无法正常工作的问题。我已经按照这里找到的几个不同的解决方案进行尝试，但都没有起作用。主菜单项显示出来了，但是没有下拉菜单。我也没有看到任何错误日志。以下是我最新的代码版本。非常感谢您的帮助。
以下是应用程序组件的HTML代码：
<app-header ></app-header>
<div class="container-fluid">
<div class="row" >
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
这里是app-header的HTML代码。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a routerLink="/" class="navbar-brand">NEMO</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" >
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="/file-restore" *ngIf="! newHireService.isNewHireMode">File Restore</a></li>
<li class="menu-item dropdown" >
<a style="cursor: pointer;" class="dropdown-toggle" data-toggle="dropdown" >Reports<span class="caret" ></span></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
我的 .angular-cli.json 文件内容如下:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "nemo-ui"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/jquery/dist/jquery.min.js",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}