Bootstrap 4 折叠导航栏与 Angular 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>

- Juan

---

请注意，ng-bootstrap需要Angular 5+。 - ConnorsFan

Answer 1

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

- ConnorsFan