Bootstrap 4使用Angular 4折叠导航栏 [英] Bootstrap 4 collapse navbar with Angular 4

问题描述

我想使用Bootstrap 4和Angular 2制作一个导航栏，当浏览器的宽度达到某个值时，将其内容折叠在按钮上.我实现了这一点，当导航栏折叠时，我可以看到将导航栏中的元素包围起来的按钮，但是此按钮不起作用.如何不使用jquery来解决此问题?我正在尝试使用ng-bootstrap.

I want to make a navbar using Bootstrap 4 and Angular 2 that collapses his content on a button when the width of the browser reaches some value. I achieve this, and when the navbar collapses I can see the button that encloses the elements in the navbar, but this button doesn't work. How can I fix this without using jquery? I was trying to use ng-bootstrap.

在图像中，您可以在导航栏折叠时看到该按钮.

In the image you can see the button when the navbar collapses.

到目前为止，我的代码:

My code so far:

<nav class="navbar navbar-expand-md fixed-top navbar-dark custom-nav">
  <span class="navbar-brand mb-0 h1">Partes vehículos</span>

  <button class="navbar-toggler" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
        Usuario: {{ authService.currentUser.name }}
      </a>
      <a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
        Perfil: TODO
      </a>
      <button class="nav-item btn btn-outline-warning ml-3 mr-3">Más opciones</button>
      <a class="nav-item nav-link active" routerLink="/" (click)="authService.logout()" *ngIf="authService.isLoggedIn()">
        Salir
        <span class="sr-only">(current)</span>
      </a>
    </div>
  </div>
</nav>

推荐答案

此stackblitz 显示了如何使用 ngbCollapse 来实现Bootstrap导航栏>来自ng-bootstrap的指令，无需使用jQuery.布尔标志isNavbarCollapsed在组件​​类中定义，其值通过按钮切换.

This stackblitz shows how you can implement the Bootstrap navbar with the ngbCollapse directive from ng-bootstrap, without using jQuery. The boolean flag isNavbarCollapsed is defined in the component class and its value is toggled by the button.

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  ...
  <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed">
      <span class="navbar-toggler-icon"></span>
  </button>
  <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse">
    ...
  </div>        
</nav>

这篇关于Bootstrap 4使用Angular 4折叠导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！