Как свернуть раскрывающееся раскрывающееся меню при нажатии за его пределами на веб-странице в Angular?

Question

Мы создали Директиву для расширения и сворачивания выпадающей панели начальной загрузки 4.Каждый раз, когда пользователь нажимает на него, он переключается, перемещается между состояниями «Развернуто» и «Свернуто».Когда он развернут и пользователь переходит на другую страницу области, он остается развернутым.Как это может заставить его свернуться, если щелкнуть за пределами области раскрывающихся кнопок, например, в других частях веб-страницы?Вот директива:

TS

  constructor(private _el: ElementRef) { }
        @HostBinding('class.show') isOpen = false;
        @HostListener('click') toogleOpen() {
            this.isOpen = !this.isOpen;
            this._el.nativeElement.querySelector('.dropdown-menu').classList.toggle('show')
        }

      }

HTML

<li *ngIf="isLogged" class="nav-item dropdown ml-auto" appdropdown #r="appdropdown">
...
...
</li>

Как закрыть открытый раскрывающийся список с помощьющелкнув по другим частям веб-страницы?

Answer 1

Вы можете отследить события щелчка и проверить, не был ли он нажат снаружи, добавив этот слушатель в вашу директиву:

@HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
    const clickedInside = this._el.nativeElement.contains(targetElement);
    if (!clickedInside) {
        this._el.nativeElement.querySelector('.dropdown-menu').classList.remove('show');
    }
}

Answer 2

html :

<button (click)="onClick($event)"></button>

компонент ( typeScript ):

public clicked: boolean = false;

public onClick(event): void {
    event.preventDefault();
    event.stopPropagation();
    this.clicked = true;
}

@HostListener('document:click', ['event'])
private clickedOutside(event): void {
    if (this.clicked) {
        this._el.nativeElement.querySelector('.dropdown-menu').classList.toggle('show')
    }
}

Я надеюсь, что моя помощьэффективен 101

Answer 3

Переместите ваш обработчик кликов из конструктора в ngAfterViewInit()

Конструктор в TS является конструктором JavaScript по умолчанию и плохо работает с угловыми хуками жизненного цикла