带有 Angular 8 的 NG-bootstrap 4：导航栏有效，但不会在点击时自动关闭（导航栏内部或外部）答案

【问题标题】：NG-bootstrap 4 with Angular 8: Navbar works, but doesn't auto-close on click (inside or outside navbar)带有 Angular 8 的 NG-bootstrap 4：导航栏有效，但不会在点击时自动关闭（导航栏内部或外部）
【发布时间】：2019-10-27 09:30:18
【问题描述】：

我在 Angular 8 中使用 ng-bootstrap，但导航栏出现问题。导航栏在单击汉堡包图标时在响应和打开/关闭方面表现正确，但问题是当单击其中一个链接或当用户单击导航栏的“外部”时它不会“自动关闭”。只有当用户再次点击汉堡时它才会关闭。有没有办法使用 ng-bootstrap 让导航栏在点击时自动关闭？

在我的研究中，我发现了一些关于如何使用 Angular 4+ 和 ng-bootstrap 设置导航栏的示例，我注意到即使是“正确”的示例也存在相同的问题。甚至可以在点击时自动关闭导航栏？以下是一些示例：

这是我使用 ng-bootstrap 为导航栏找到的典型代码：

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>

以下是 plunker 和 stackblitz 示例：
http://plnkr.co/edit/PlGTWzSGqawgQC2wfKp8?p=preview

https://stackblitz.com/edit/angular-ww6oap

在这两个示例中，您都会看到导航栏正常工作，但单击链接或导航栏外部不会关闭它。只有再次点击汉堡图标才会关闭它。

【问题讨论】：

标签： angular navbar ng-bootstrap

【解决方案1】：

我想通了。我们可以将它添加到 routerlinks 以将 isNavbarCollapsed 变量设置为 true：

(click)="isNavbarCollapsed = true"

整体看起来是这样的：

<div class="collapse navbar-collapse" [ngbCollapse]="isNavbarCollapsed" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" [routerLink]="['/dash/', someParam]" (click)="isNavbarCollapsed = true">Dashboard <span
              class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/archive" (click)="isNavbarCollapsed = true">Archive</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/help" (click)="isNavbarCollapsed = true">Help</a>
    </li>
  </ul>
</div>

希望对其他人有所帮助。此技术当前（2019-06-18）未包含在 ng-bootstrap 文档中，因此当它处于响应状态（汉堡菜单）时，关闭 ng-bootstrap 导航栏的最佳做法不是很明显.

【讨论】：

你能把(click)="isNavbarCollapsed = true" 只放在父 div 中吗？它似乎对我有用。