NG-bootstrap 4配合Angular 8使用：导航栏可用，但无法在单击时自动关闭（无论是在导航栏内部还是外部）。

Question

我正在使用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 在这两个示例中，您会发现导航栏可以工作，但是单击链接或导航栏外部无法关闭它。只有再次单击汉堡图标才能关闭它。

- Sol

Answer 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导航栏。

- Sol

---

你能把 (click)="isNavbarCollapsed = true" 只放在父级 div 中吗？这对我来说似乎是有效的。 - ConnorsFan