Запретить закрытие диалогового окна Angular Material при нажатии кнопки выхода, но разрешать закрытие при нажатии на фон - PullRequest
Новая
       7

Запретить закрытие диалогового окна Angular Material при нажатии кнопки выхода, но разрешать закрытие при нажатии на фон

0 голосов
/ 24 июня 2018

По умолчанию при нажатии кнопки esc диалоговое окно закрывается. Однако я не хочу этого намеченного поведения.

Я бы хотел предотвратить закрытие при нажатии кнопки esc , но при этом разрешить щелчок по фону, чтобы закрыть диалоговое окно. Как это можно сделать?

Я пробовал что-то подобное. Однако это не работает: 

openEditDialog() {
  const dialogRef = this.dialog.open(EditPlaceDialogComponent, {
    width: '90%',
    height: '720px'
  });

  dialogRef.keydownEvents().subscribe(e => {
    if (e.keyCode === 27) {
      e.preventDefault();
      dialogRef.disableClose = false;
    }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}

1 Ответ

0 голосов
/ 25 июня 2018

Вы можете использовать опцию disableClose MatDialogConfig.Передайте его как второй параметр MatDialog#open: 

openDialog() {
  this.dialog.open(MyDialogComponent, { disableClose: true });
  // ...
}

Это должно помешать esc закрыть диалоговое окно.

РЕДАКТИРОВАТЬ: Мне удалось решить то, что вы просили, адаптировав ответ Марка (в качестве комментария к моему ответу), а также используя MatDialogRef#backdropClick для прослушивания событий щелчка на заднем плане.

Первоначально диалогdisableClose будет установлен как true.Это гарантирует, что нажатие клавиши esc, а также нажатие на фон не приведут к закрытию диалога.

После этого, подписавшись на метод MatDialogRef#backdropClick (который генерируется, когда фон нажимается и возвращается какa MouseEvent).

В любом случае, достаточно технических разговоров.Вот код: 

openDialog() {
  let dialogRef = this.dialog.open(EditPlaceDialogComponent, { disableClose: true /* Your other config options here */ });
  /*
     Subscribe to events emitted when the backdrop is clicked
     NOTE: Since we won't actually be using the `MouseEvent` event, we'll just use an underscore here
     See https://stackoverflow.com/a/41086381 for more info
  */
  dialogRef.backdropClick().subscribe(_ => {
    // Close the dialog
    dialogRef.close();
  })

  // ...
}

Демонстрация Stackblitz (нажмите «Открыть четвертое диалоговое окно», чтобы проверить это!)

...