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
Кто как решает проблему автоматического закрывания оверлеев по клику вне?
Вычислять кликОутсайд не в директиве, а в компоненте, где и обрабатывается клик. Собственно и делать это вычисление до того как метод поменяет тру на фолс
А поч просто не сделать компонент - модалку, внутри которого уже лежит компонент с тем что нужно
когда-то я пытался решить такую проблему) в итоге заюзал ngx-clickout
Обсуждают сегодня