时间戳

首页 > 解决方案 > 浏览器屏幕最小化后，菜单栏切换器在 Angular 中不起作用。我在 Angular 中使用引导功能

angular - 浏览器屏幕最小化后，菜单栏切换器在 Angular 中不起作用。我在 Angular 中使用引导功能

问题描述

HTML 非常适合全屏浏览器模式。当我将浏览器调整为更小的尺寸时，导航栏正在消失，广告切换会显示，这是预期的行为。现在，如果我单击切换，则菜单列表应按屏幕尺寸显示。以下是 HTML 代码

<nav class="navbar navbar-expand-lg fixed-top">

<button class="navbar-toggler" type="button" 
  data-toggle="collapse" data-target="#navigation-bar" 
  aria-controls="navbarTogglerDemo03" aria-expanded="false" 
  aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">&#9776;</span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navigation-bar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#social">CONNECT</a></li>
            <li class="nav-item"><a class="nav-link" href="#who">WHO</a></li>
            <li class="nav-item"><a class="nav-link" href="#work">WORK</a></li>
            <li class="nav-item"><a class="nav-link" href="#why">WHY</a></li>
            <li class="nav-item"><a class="nav-link" href="#customers">CUSTOMERS</a></li>
            <li class="nav-item"><a class="nav-link" href="#pricing">PRICING</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
        </ul>
    </div>

</nav>

标签： angularhtmlbootstrap-4

解决方案

由于您在 Angular 项目中使用引导 css，因此一种解决方案可能是从以下位置安装 ngx-bootstrap：

 npm i ngx-bootstrap --save

在您的 app.module 中导入折叠模块：

 CollapseModule.forRoot()

然后在你的组件中（我想你有一个 navbarComponent.ts 或类似的？）

  isCollapsed: boolean = false;

最后在 navbarComponent 的模板中

 <button class="navbar-toggler" type="button" (click)="isCollapsed=!isCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>
 <div class="collapse navbar-collapse"  [collapse]="isCollapsed">
   ... 
 </div>

希望这可以帮助！

推荐阅读