为什么我的数据切换在引导程序中不起作用？答案

【问题标题】：why is my datatoggle not working in bootstrap?为什么我的数据切换在引导程序中不起作用？
【发布时间】：2021-04-22 10:00:55
【问题描述】：

我在移动模式下单击时可以看到图标，但图标不起作用。我在下面添加我的代码。

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
    <a class="navbar-brand" href="#"> DreamTeam </a>
    <button
      class="navbar-toggler"
      data-toggle="collapse"
      data-target="#mynav"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
      
    </div>
  </nav>
  
  <div class="container-fluid">
    <h1>Welcome to Angular</h1>
    <h2>Hello</h2>
  </div>

我已经在我的 Angular 项目中从 npm 安装了 jquery 和 bootstrap 并添加了它。

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

【问题讨论】：

确保你的项目中应该有引导 js 文件 bootstrap.js 用于切换。
我添加了 bootstrap.js，还是同样的问题@Prakash Rajotiya

标签： html angular bootstrap-4

【解决方案1】：

建议多于回答，但是当您想将 Bootstrap 与 Angular 一起使用时，最好（至少根据我的经验）使用类似 ngx-bootstrap 的东西。
https://valor-software.com/ngx-bootstrap/#/

将 jQuery 与 Angular 一起使用并不是最好的主意，因为 jQuery 本身并没有提供任何 Angular 开箱即用的东西。它可能的 jQuery 执行代码可以绕过 Angular 的内置安全性，例如其内置的卫生设施。

缺点是有时您必须等待 NGX-Bootstrap 赶上来（就像现在的 Bootstrap 5）

【讨论】：

【解决方案2】：

在这行代码<div class="collapse navbar-collapse" id="mynav"> 更新代码，如下面的代码所示...

<div class="navbar-collapse" id="mynav" [class.collapse]="navbarCollapsed">

在component.ts文件中

export class HeaderComponent implements OnInit {

    navbarCollapsed = true;
}

基本上，您需要将collapse bootstrap 类与 angular 绑定。

【讨论】：