В Angular можно легко решить эту задачу, используя директиву "HostListener" и событие "document:click". Вот пример кода:
1. Создайте новую директиву с помощью команды "ng generate directive close-outside-modal".
ng generate directive close-outside-modal
2. Откройте созданный файл "close-outside-modal.directive.ts" и добавьте следующий код:
import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';
@Directive({
selector: '[closeOutsideModal]'
})
export class CloseOutsideModalDirective {
@Output() closeOutsideModal = new EventEmitter();
constructor(private elementRef: ElementRef) {}
@HostListener('document:click', ['$event.target'])
onClick(targetElement: any) {
const clickedInside = this.elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.closeOutsideModal.emit();
}
}
}
3. Импортируйте и добавьте созданную директиву в модуль, где используется модальное окно.
import { CloseOutsideModalDirective } from './close-outside-modal.directive';
@NgModule({
declarations: [CloseOutsideModalDirective],
// ...
})
export class AppModule { }
4. Используйте директиву в HTML-коде модального окна.
<div class="modal" closeOutsideModal (closeOutsideModal)="closeModal()">
<!-- Содержимое модального окна -->
</div>
5. В компоненте, где находится модальное окно, добавьте метод "closeModal()", который будет закрывать модальное окно:
export class ModalComponent {
// ...
closeModal() {
// Логика закрытия модального окна
}
}
Теперь, когда пользователь нажимает вне модального окна, срабатывает событие "document:click" в директиве "CloseOutsideModalDirective" и вызывается метод "closeModal()" в компоненте, где можно добавить свою логику для закрытия модального окна. Это позволяет закрыть модальное окно при клике вне его области.