Всем привет. Написал директиву "ClickOutside" с методом: @HostListener('document:click', ['$event']) click(event) {

Question

Всем привет. Написал директиву "ClickOutside" с методом: @HostListener('document:click', ['$event']) click(event) {

if (!this.element.nativeElement.contains(event.target)) {
console.log('clicked outside', event.target) ...;
} else {
console.log('clicked inside', event.target);
}
}

повесил её на элемент что-то в духе:

<div appClickOutside ...>
<div (click)="isOpen=!isOpen">
<ng-container [ngSwitch]="isOpen">
<div *ngSwitchCase="true">...</div>
<div *ngSwitchCase="false">...</div>
</ng-container>
</div>
</div>

Соответственно клик на *ngSwitchCase="true" приводит к замене элемента на *ngSwitchCase="false", и в момент вычисления клика в @HostListener event.target уже не в доме.

Я нагуглил два решения такой проблемы:
1) в Material кладут div с z-index на один меньше целевого элемента, который собирает все клики вне элемента(это блокирует клик на другие такие же элементы, что ощущается очень ущербно)
2) народ ставит костыли из setTimeout

Кто как решает проблему автоматического закрывания оверлеев по клику вне?

#angular #frontend #javascript #programming #russian

0

30.03.2018

3 ответов

29 просмотров

Anton Karton

А поч просто не сделать компонент - модалку, внутри которого уже лежит компонент с тем что нужно

0

30.03.2018

Dmitry Zakharov

когда-то я пытался решить такую проблему) в итоге заюзал ngx-clickout

0

31.03.2018

Олег Постоев · Accepted Answer

Олег Постоев

Вычислять кликОутсайд не в директиве, а в компоненте, где и обрабатывается клик. Собственно и делать это вычисление до того как метод поменяет тру на фолс

0

30.03.2018

169 похожих чатов

Всем привет. Написал директиву "ClickOutside" с методом: @HostListener('document:click', ['$event']) click(event) {

3 ответов

Похожие вопросы