Блог

Я новичок в 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:');
        }
      }
     }