web-dev-qa-db-fra.com

Désactivez le clic en dehors de la zone de dialogue du matériau angulaire pour fermer la boîte de dialogue (avec Angular Version 4.0+)

Je travaille actuellement sur la page de réinitialisation du mot de passe d'un projet Angular 4. Nous utilisons Matériau angulaire pour créer la boîte de dialogue. Toutefois, lorsque le client quitte la boîte de dialogue, celle-ci se ferme automatiquement. Existe-t-il un moyen d’éviter la fermeture du dialogue tant que notre fonction d’appel "close" du côté du code? Ou comment devrais-je créer un modal non fermable?

angulardialogmodal-dialogangular-material
30
Zeqing Zhang

Il y a deux façons de le faire.

  1. Dans la méthode qui ouvre la boîte de dialogue, transmettez l'option de configuration suivante disableCloseen tant que deuxième paramètre de MatDialog#open() et définissez-la sur truename__:

    export class AppComponent {
  constructor(private dialog: MatDialog){}
  openDialog() {
    this.dialog.open(DialogComponent, { disableClose: true });
  }
}

  2. Vous pouvez également le faire dans le composant de dialogue lui-même.

    export class DialogComponent {
  constructor(private dialogRef: MatDialogRef<DialogComponent>){
    dialogRef.disableClose = true;
  }
}

Voici ce que vous recherchez:

<code>disableClose</code> property in material.angular.io

Et voici une démo de Stackblitz

Autres cas d'utilisation

Voici quelques autres cas d'utilisation et extraits de code sur la manière de les implémenter.

Permettre esc pour fermer la boîte de dialogue mais interdire de cliquer sur le fond pour fermer la boîte de dialogue

Comme l’a dit @MarcBrazeau dans le commentaire ci-dessous, vous pouvez autoriser le esc touche pour fermer le modal, mais interdit toujours de cliquer en dehors du modal. Utilisez ce code sur votre composant de dialogue:

import { Component, OnInit, HostListener } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
  selector: 'app-third-dialog',
  templateUrl: './third-dialog.component.html'
})
export class ThirdDialogComponent {
  constructor(private dialogRef: MatDialogRef<ThirdDialogComponent>) {      
}
  @HostListener('window:keyup.esc') onKeyUp() {
    this.dialogRef.close();
  }

}

Prévenir esc de fermer la boîte de dialogue mais permet de cliquer sur le fond pour fermer

P.S. Ceci est une réponse qui provient de cette réponse , où la démonstration a été basée sur cette réponse.

Pour prévenir le esc touche de fermeture de la boîte de dialogue mais permet de cliquer sur le fond pour fermer, j’ai adapté la réponse de Marc, ainsi que pour utiliser MatDialogRef#backdropClick pour écouter les événements de clic sur le fond.

Initialement, l'option de configuration disableClosesera définie dans la boîte de dialogue en tant que truename__. Cela garantit que la pression de la touche escname__, ainsi que le fait de cliquer sur l'arrière-plan ne feront pas fermer la boîte de dialogue.

Ensuite, abonnez-vous à la méthode MatDialogRef#backdropClick (qui émet lorsque le fond est cliqué et retourne sous la forme MouseEventname__).

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

openDialog() {
  let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
  /*
     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();
  })

  // ...
}

Alternativement, cela peut être fait dans le composant dialog:

export class DialogComponent {
  constructor(private dialogRef: MatDialogRef<DialogComponent>) {
    dialogRef.disableClose = true;
    /*
      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();
    })
  }
}
117
Edric

RTFM

Selon la documentation ici , vous pouvez utiliser l’entrée disableClose pour empêcher l’utilisateur de fermer la boîte de dialogue.

0
Abdel

Ça marche pour moi 

  openDialog() {
    this.dialog.open(YourComponent, { disableClose: true });
  }
0
Akitha_MJ

Je sais que cela fait quelques années, mais vous ne pouvez pas utiliser backdrop: 'static' pour désactiver le clic en dehors et keyboard: false pour désactiver le mode échappement?

Docs défiler jusqu'à la section modale. Je suis sûr que c’est bon pour Angular 4+.

Meh Exemple:

import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";

@Component({
  // Setup stuff..
})

export class ModalExample {
  modalRef: BsModalRef;

  constructor(
    private modalService: BsModalService, 
  ) { }

  ngOnInit(): void {

  }

  public openConfirmationModal(submitClaimResult: SubmitDealerClaimResult) {
    this.modalRef = this.modalService.show({backdrop: 'static', keyboard: false });
  }

}
0
DForsyth