#angular #bootstrap-4 #onclick #toggle #nav
#angular #bootstrap-4 #onclick #переключение #навигация
Вопрос:
Я новичок в 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:');
}
}
}