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

【问题标题】：bootstrap 4 with Angular 8: Navbar works, but doesn't auto-close on click (inside or outside navbar)带有 Angular 8 的引导程序 4：导航栏有效，但不会在点击时自动关闭（导航栏内部或外部）
【发布时间】：2020-06-22 02:15:46
【问题描述】：

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

 isCollapsed = false;

 <nav class="navbar navbar-expand-lg navbar-light">
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="isCollapsed = !isCollapsed"
      [attr.aria-expanded]="!isCollapsed"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <!--Logo-->
    <div class="sidebar-header d-none d-lg-block">
      <img src="assets/img/logo_color_cloudev.png" alt="cloudev-logo" />
    </div>

    <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngbCollapse]="isCollapsed">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" routerLink="/dashboard" routerLinkActive="active" (click)="isHide()"><i class="fa fa-desktop dash"></i><span>Dashboard</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/roles" routerLinkActive="active" *ngIf="this.isAdmin"><i class="fa fa-gg-circle icon"></i>Roles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/users" routerLinkActive="active" *ngIf="this.isAdmin"><i class="fa fa-users user"></i>Users</a>
        </li>
        <!--Dropdown-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-line-chart leaves"></i><span>Leave Management</span>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" routerLink="/user-leaves" *ngIf="!this.isAdmin" routerLinkActive="active">My leaves</a>
            <a class="dropdown-item" routerLinkActive="active" *ngIf="this.isAdmin" routerLink="/leave-types">Leave types</a>
            <a class="dropdown-item" routerLinkActive="active" *ngIf="this.isAdmin" routerLink="/leave-request-admin">Leave Requests</a>
            <a class="dropdown-item" routerLink="/holidays" routerLinkActive="active">Holidays</a>
          </div>
        </li>
        <!--Toggle for header-->
        <div class="fullview">
          <hr class="d-block d-lg-none" />
          <li class="nav-item">
            <a class="nav-link d-block d-lg-none" routerLink="/my-profile" routerLinkActive="active"><i class="fa fa-user-md icon"></i>My profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link d-block d-lg-none" routerLink="/passwordchange" routerLinkActive="active"><i class="fa fa-key icon"></i>Reset password</a>
          </li>
          <li class="nav-item">
            <a class="nav-link d-block d-lg-none" (click)="logout()" routerLinkActive="active"><i class="fa fa-sign-out icon"></i>Logout</a>
          </li>
        </div>
      </ul>
    </div>
  </nav>

【问题讨论】：

标签： angular typescript bootstrap-4 navbar

【解决方案1】：

您可以使用以下属性来关闭相应的元素

data-toggle="collapse" data-target="#navbarNavDropdown"

【讨论】：