web-dev-qa-db-fra.com

Empêche la fermeture de Angular Dialogue de matériau lorsque le bouton d'échappement est enfoncé mais autorise la fermeture lorsque le fond est cliqué

Par défaut, lorsque le esc est enfoncé, la boîte de dialogue se ferme. Cependant, je ne veux pas ce comportement voulu.

Ce que j'aimerais, c'est empêcher la fermeture lorsque le esc bouton est enfoncé mais permet toujours un clic sur le fond pour fermer la boîte de dialogue. Comment cela peut-il être fait?

J'ai essayé quelque chose comme ça. Cependant, cela ne fonctionne pas:

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');
  });
}
angularangular-materialangular-material2
6
通りすがりのおっさん

Vous pouvez utiliser l'option disableClose de MatDialogConfig. Passez-le comme deuxième paramètre de MatDialog#open:

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

Cela devrait empêcher esc de fermer la boîte de dialogue.

EDIT: J'ai réussi à résoudre ce que vous avez demandé en adaptant la réponse de Marc (en tant que commentaire sur ma réponse), ainsi qu'en utilisant MatDialogRef#backdropClick pour écouter les événements de clic sur le fond.

Initialement, le dialogue aura disableClose défini comme true. Cela garantit que la pression de la touche esc, ainsi que le fait de cliquer sur le fond ne provoquera pas la fermeture de la boîte de dialogue.

Ensuite, vous vous abonnez à MatDialogRef#backdropClick méthode (qui émet lorsque la toile de fond est cliquée et retourne comme MouseEvent).

Quoi qu'il en soit, assez de discussions techniques. Voici le code:

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();
  })

  // ...
}

Démo Stackblitz (cliquez sur "Ouvrir la quatrième boîte de dialogue" pour le tester!)

2
Edric