Angular 中的 Bootstrap 4 Navbar 下拉列表不适用于小型设备

Question

我在我的 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>````

Answer 1

我找到的解决方案是，当您将 jquery 和 bootstrap 作为脚本添加到 index.html 时，按钮的功能会恢复

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>```

Angular 中的 Bootstrap 4 Navbar 下拉列表不适用于小型设备

Boostrap 4 Navbar Dropdown in Angular not working on small devices

navbar

bootstrap-4

angular7