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

Или есть лучший способ решить это. Заранее спасибо.

0 ответов

Другие вопросы по тегам