Bootstrap 崩溃在 Angular 9 中不起作用

Posted 2023-03-24

【中文标题】Bootstrap 崩溃在 Angular 9 中不起作用

【英文标题】：Bootstrap collapse not working in Angular 9

【发布时间】：2021-11-25 07:20:35

【问题描述】：

当我更改屏幕尺寸时，我的导航栏无法打开菜单。

这是我正在运行的依赖项的版本：

"@angular/animations": "~9.0.6",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "bootstrap": "^5.1.1",
    "jquery": "3.4.1",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"

---

我已尝试按照另一篇文章中的建议降级我的 jquery，但没有做任何事情。

这是我的 html：

---

<nav class="navbar navbar-expand-lg navbar-dark bg-primary my-navbar fixed-top">
    <div class="container-fluid">
      <!--<a class="navbar-brand" href="#">Navbar</a> -->
      <img
    
    
    src= "assets/imgs/logo.png"
  />
  <button class="navbar-toggler" type="button" data-toggle="collapse"  data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="/userprofile" routerLinkActive="active">Home
              <!--<span class="visually-hidden">(current)</span>-->
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/generalmachining" routerLinkActive="active" >General Machining</a>
            <span class="visually-hidden">(current)</span>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/toolreorder" routerLinkActive="active">Tool Re-Ordering</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/setupsheets" routerLinkActive="active">Setup Sheets</a>
          </li>     
          <li class="nav-item">
            <a class="nav-link" routerLink="" >Log Out</a>
          </li>     
        </ul>
        <form class="d-flex">
          <input class="form-control me-sm-2" type="text" placeholder="Search">
          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

---

在我调用 ID 的 HTML 中，我在数据目标中有“#”，它与开发中的 ID 匹配。

这是我的风格和脚本路径：

---

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

---

我觉得此时我正在处理一个丢失的包或错误版本的包，但我就是无法解决它。

感谢您的帮助。

【问题讨论】：

这能回答你的问题吗？ Bootstrap 5 dropdown not working on angular 12

感谢您的回复勇。结果是我的“data-bs-toggle”和“data-bs-target”中缺少“-bs-”。

【参考方案1】：

尝试阅读Bootstrap v5 docs。数据属性名称已更改，现在使用 bs- 前缀命名空间。进行以下更改，它应该可以工作：

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"  data-bs-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

【讨论】：

谢谢你，阿利！那成功了。我错过了我正在阅读 v4 文档，当我点击你的链接时，它就在那里。我很感激你的时间。看起来我还是太新了，无法投票，但这对我来说是正确的答案。

【参考方案2】：

尝试在您的angular 9 应用中安装bootstrap，如下所示。这仅适用于 css 导入。

npm install bootstrap --save

现在你需要像这样在style.css文件中直接导入bootstrap css：

@import "~bootstrap/dist/css/bootstrap.css";

但是，如果您需要安装 bootstrap 和 jquery 和 popper js，请运行以下命令，如下所示：

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

成功运行上述命令后，将其导入angular.json文件中，如下所示：

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

【讨论】：

感谢 Salahuddin 抽出时间回复。它最终成为我的“data-bs-toggle”和“data-bs-target”中缺少的“-bs-”。我确实注意到我没有 popper 脚本，但我确实在依赖项中有 "popper.js": "^1.16.1"，所以我不确定这是否会在以后产生影响。再次感谢您。