Как вызвать функцию, когда пользователь щелкает вне диалогового окна

#html #angular #typescript #dialog #android-alertdialog

#HTML #угловой #typescript #диалоговое окно #android-alertdialog

Вопрос:

У меня есть диалоговое окно оповещения, и у меня есть кнопка с надписью «Понял», чтобы отключить диалоговое окно оповещения, чтобы оно перестало отображаться при повторном посещении пользователем сайта.

Мое диалоговое окно оповещения также закрывается, когда пользователь щелкает вне диалогового окна, поэтому мне интересно, как применить вышеуказанное действие, когда пользователь щелкает вне диалогового окна, чтобы закрыть диалоговое окно оповещения и перестать отображаться, когда пользователь повторно заходит на сайт.

итак, это то, что я пытаюсь сделать

Пользователь щелкает вне диалогового окна оповещения -> закрыть диалоговое окно оповещения -> деактивировать диалоговое окно оповещения (вызвать функцию gotIt()) )

Диалоговое окно HTMl

         <button mat-raised-button color="primary" [style.marginRight.px]="20" (click)="gotIt()" matTooltip="Close">Got
            it!</button>


  
   gotIt() {
    for (let index = 0; index < this.notifications.length; index  ) {
      const notification = this.notifications[index];
      if (notification amp;amp; notification.userNotification) {
        notification.userNotification.isDismissed = 1;
        notification.userNotification.isUnread = 0;
      }
    }
    this.notificationService.updateUserNotification(this.notifications).subscribe((response: any) => {
      this.dialogRef.close()
    })
  }
  

Ответ №1:

Вы можете просто использовать hostListener для прослушивания события следующим образом

  @HostListener('document:click', ['$event']) click($event){
    // here you can hide your menu
    this.dialogRef.close();
  }