angular.io: как исключить узлы родительского компонента из слушателя узла в дочернем компоненте
Следующий сценарий: есть компонент, который содержит кнопку удаления (компонент PARENT). Если пользователь нажимает на эту кнопку, он должен открыть простое модальное подтверждение (компонент CHILD). Клик за пределами этого модального режима должен снова закрыть модальное подтверждение. Я попытался понять это и создал слушатель узла для дочернего компонента (модальный), но не знаю, как исключить кнопку, которая находится в родительском компоненте.
@HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
const clickedOutside = !this.elementRef.nativeElement.contains(targetElement);
// needs to be extended to exclude the button in parent component
if (clickedOutside && this.display) {
console.log('host listener - closing modal');
// this.close(false);
}
}
Кто-нибудь знает, как решить эту проблему? Вот ссылка на простое угловое приложение: https://stackblitz.com/edit/angular-nbmfee
Или есть лучший способ решить это. Заранее спасибо.