Bootstrap 4 导航栏不会在 Angular 4 中折叠

Posted 2023-03-06

【中文标题】Bootstrap 4 导航栏不会在 Angular 4 中折叠

【英文标题】：Bootstrap 4 Navbar doesnt collapse in Angular4

【发布时间】：2018-04-14 06:07:35

【问题描述】：

我在 Angular 4 项目中使用 Bootstrap 4 和 Ng-Bootstrap，

我已经以这种方式在我的 angular-cli.json 中链接了 que bootstrap.css

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.css"
  ],

并在我的 app.module 中导入 NgbModule，如下所示

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  NgbModule  from '@ng-bootstrap/ng-bootstrap';

import  AppComponent  from './app.component';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

我制作了一个导航栏，从引导网站复制了文档，并从 ng-bootstrap 添加了切换组件（效果很好），代码如下所示

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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="#">Link</a>
      </li>
      <li>
        <div ngbDropdown class="d-inline-block">
          <div class="nav-link" id="dropdownBasic1" ngbDropdownToggle>Toggle 
dropdown</div>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
            <button class="dropdown-item">Action - 1</button>
            <button class="dropdown-item">Another Action</button>
            <button class="dropdown-item">Something else is here</button>
          </div>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" 
aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit">Search</button>
    </form>
  </div>
</nav>

当我缩小窗口并且切换器起作用时，问题就开始了，当我按下折叠导航栏的按钮时它不起作用。

我尝试安装和链接 jquery 和 popper 的 js 文件和 bootstrap 文件，但它仍然不起作用，实际的 angular-cli.json 看起来像这样

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

      ],

我做错了什么？

【参考方案1】：

要使用 Angular，您需要此修复程序

首先在你的类中定义这个public navbarCollapsed = true;

然后更改您的按钮

<button class="navbar-toggler" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

您还需要将其添加到折叠的 div 中

<div class="collapse navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarSupportedContent"> 

现在你不需要 jquery、popper 或 bootstrap.js

您可以找到有关此问题的更多信息here。

还检查 ng-bootstraps 工作演示页面代码link。

【参考方案2】：

我遇到了同样的问题，我使用了普通的 bootstrap 4 而不是 ng-bootstrap，这样我也不需要 app.module 文件中的任何模块。有用。下面是添加到 angular.json (angular v6) 和 bootstrap 4+ 中的脚本：

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

对于 CSS，我更喜欢使用 Scss 版本，所以它是这样的。

"styles": [
              "src/styles.scss",
              "../node_modules/font-awesome/scss/font-awesome.scss"
            ],

我将 bootstrap 导入到 style.scss 文件中

@import "~bootstrap/scss/bootstrap.scss";

干杯！ JK

【参考方案3】：

寻找编译好的类，也许你得到了错误的版本。我对 col-sm-offset-# 类有类似的问题，问题是该版本中不存在此类。可能是同一个问题

这是路径 ..\node_modules\bootstrap\dist\js 这里我们有两个文件 bootstrap.js 和 bootstrap.min.js

在 bootstrap.js 中找到导航类。如果找不到，请查找另一个 Bootstrap 存储库。

祝你好运。

【参考方案4】：

这对我来说很好 我安装了 npm i --save @ng-bootstrap/ng-bootstrap ng add @angular/localize

app.module.ts

import NgbModule from '@ng-bootstrap/ng-bootstrap';

imports:[NgbModule]

NgbModule.forRoot() 不工作

angular.json "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.js]`

希望这会有所帮助，即使只是一点点