angular - Angular / Bootstrap：单击外部时折叠导航切换菜单

Question

我是 Angular 的新手，当我在下拉菜单之外单击时，我会尝试关闭导航切换菜单。我尝试使用ng-click-outside 指令来执行此操作，但由于某种原因它不起作用。目前它根本不做任何事情，或者当我在外面点击时它会切换（我不想要什么）。在外部单击时，如果此时已切换，则应将其关闭。onClickedOutside() 方法已经计算了正确方式之外的点击量。到目前为止我所拥有的：

nav.component.html：

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" routerLink="/landing">MYSITE</a>
      <button class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
          [attr.aria-expanded]="!collapsed"
          (click)="collapsed = !collapsed"
          (clickOutside)="collapsed == false ? collapsed = true : collapsed = false"> // this does not work as expected
     <span class="navbar-toggler-icon"></span>
     </button>

    <div class="collapse navbar-collapse" id="navbarText" [class.collapse]="collapsed">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0  mx-md-auto order-1 order-md-2">
        <li class="nav-item active" ngbDropdown [routerLinkActive]="['active']">
          <a class="nav-link" routerLink="/landing">Landing Page</a>
        </li>
     </ul>
    </div>
   </nav>

navbar.component.ts

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-navbar',
      templateUrl: './navbar.component.html',
      styleUrls: ['./navbar.component.scss']
    })
    export class NavbarComponent implements OnInit {
      collapsed = true;
      constructor(public breakpointObserver: BreakpointObserver) {}

      onClickedOutside(e: Event) {
        if (!this.collapsed) {
          console.log('Clicked outside:');
        }
      }
     }

标签： angularbootstrap-4onclicktogglenav