使用Angular 4的Bootstrap 4折叠导航栏

Question

我想使用Bootstrap 4和Angular 2创建一个导航栏，当浏览器的宽度达到某个值时，它会在按钮上折叠他的内容。我实现了这一点，当导航栏崩溃时，我可以看到包含导航栏中元素的按钮，但是这个按钮不起作用。如何在不使用jquery的情况下解决这个问题？我试图使用ng-bootstrap。

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

我的代码到目前为止：

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

Answer 1

This stackblitz展示了如何使用ng-bootstrap中的ngbCollapse指令实现Bootstrap导航栏，而不使用jQuery。布尔标志isNavbarCollapsed在组件类中定义，其值由按钮切换。

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