时间戳

首页 > 解决方案 > 为什么我的数据切换不能在引导程序中工作？

html - 为什么我的数据切换不能在引导程序中工作？

问题描述

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

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

标签： htmlangularbootstrap-4

解决方案

在这行代码<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;
}

basicaaly，您需要将collapse引导类与角度绑定。

推荐阅读