Question

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

<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"
            ]

Answer 1

更多是建议而不是答案，但是当您想在 Angular 中使用 Bootstrap 时，最好（至少以我的经验）使用类似 ngx-bootstrap 的东西。
https://valor-software.com/ngx-bootstrap/#/

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

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

Answer 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 引导类与 angular 绑定。

为什么我的 datatoggle 在引导程序中不起作用？

2 个答案: