Bootstrap 汉堡包在 Angular 6 项目中不起作用答案

【问题标题】：Bootstrap hamburger not working in Angular 6 projectBootstrap 汉堡包在 Angular 6 项目中不起作用
【发布时间】：2019-05-10 02:52:51
【问题描述】：

我在 Angular 6 项目中使用引导样式来设计注册页面，并且运行良好。但是当我点击汉堡图标时调整浏览器大小后，它不会折叠，因此汉堡菜单下的图标不会出现。

这里是 angular.json 文件中的样式标签：

"styles":   [
            "src/styles.css"
            ],

这是styles.css文件：

@import "~bootstrap/dist/css/bootstrap.min.css";
@import '~ngx-toastr/toastr.css';

angular.json 文件中的脚本数组：

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

导航栏 HTML：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">

  <a class="navbar-brand" href="/">My Chat</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="true" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link pointer" (click)="goToSignUp()">Sign-Up</a>

      </li>

    </ul>

  </div>

</nav>

<div class="row p-0 m-0">

  <div class="col-sm"></div>

  <div class="col-sm p-5">

    <h2 class="form-signin-heading">Sign in to continue</h2>

    <label for="inputEmail" class="sr-only">Email address</label>

    <input type="email" id="inputEmail" class="form-control" [(ngModel)]="email" placeholder="Email address" required autofocus>

    <br>

    <label for="inputPassword" class="sr-only">Password</label>

    <input type="password" id="inputPassword" class="form-control" [(ngModel)]="password" placeholder="Password" (keydown.enter)="onKeydown()" required>

    <br>

    <button class="btn btn-lg btn-primary btn-block" type="button"  (click)="signInFunction()">Sign in</button>

  </div>

  <div class="col-sm"></div>

</div>

不知道我错过了什么。

【问题讨论】：

请也发布导航栏 HTML
我已经发布了导航栏 html。
可能会更容易使用 ng-bootstrap - medium.com/@frypan/…
谢谢詹姆斯，但在我的应用程序中，汉堡菜单应该只在浏览器调整大小时出现，即移动或平板电脑屏幕。对于桌面视图，它工作正常。

标签： angular twitter-bootstrap

【解决方案1】：

尝试这样做->

npm install -- save @ng-bootstrap/ng-bootstrap

ng-bootstrap 安装完成后
在 app.module.ts-> 添加 -> import { NgbModule} from ‘@ng-bootstrap/ng-bootstrap’; 并将其放在@NgModule 下，导入：[NgbModule.forRoot()]
再次运行你的 Angular 应用

另外请尝试在angular.json的styles下添加“node_modules/bootstrap/dist/css/bootstrap.min.css”

并在 HTML 正文之间的项目 Index.Html 内的 Bootstrap 文档网站上添加 jquery、popper 和 bootstrap 的脚本导入。

【讨论】：

我还必须使用 npm install jquery 添加 jquery 并将“node_modules/jquery/dist/jquery.min.js”放在 angular.json 的脚本部分

【解决方案2】：

在index.html文件中的/body之前添加script标签：

-script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"
  
-script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"

【讨论】：