Il y a deux façons de le faire.
-
Dans la méthode qui ouvre la boîte de dialogue, passez l'option de configuration suivante disableClose en tant que deuxième paramètre dans MatDialog#open() et définissez-la sur true:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
-
Alternativement, faites-le dans le composant de la boîte de dialogue lui-même.
export class DialogComponent {
constructor(private dialogRef: MatDialogRef){
dialogRef.disableClose = true;
}
}
Voici ce que vous recherchez:
![<code>disableClose</code> propriété dans material.angular.io]()
Et voici une démonstration Stackblitz
Autres cas d'utilisation
Voici quelques autres cas d'utilisation et extraits de code pour les implémenter.
Permettre à esc de fermer la boîte de dialogue mais interdire de cliquer sur le fond pour la fermer
Comme l'a dit @MarcBrazeau dans le commentaire en dessous de ma réponse, vous pouvez permettre à la touche esc de fermer la boîte de dialogue mais toujours interdire de cliquer en dehors de la boîte. Utilisez ce code dans le composant de votre boîte 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) {
}
@HostListener('window:keyup.esc') onKeyUp() {
this.dialogRef.close();
}
}
Empêcher esc de fermer la boîte de dialogue mais autoriser de cliquer sur le fond pour la fermer
P.S. Ceci est une réponse qui provient de cette réponse, où la démo était basée sur cette réponse.
Pour empêcher la touche esc de fermer la boîte de dialogue mais permettre de cliquer sur le fond pour la fermer, j'ai adapté la réponse de Marc, ainsi qu'utilisé MatDialogRef#backdropClick pour écouter les événements de clic sur le fond.
Initialement, la boîte de dialogue aura l'option de configuration disableClose définie sur true. Cela garantit que la touche esc, ainsi que le clic sur le fond, ne fermera pas la boîte de dialogue.
Ensuite, abonnez-vous à la méthode MatDialogRef#backdropClick (qui émet un événement lorsque le fond est cliqué et le renvoie en tant que MouseEvent).
Quoi qu'il en soit, assez de jargon technique. Voici le code:
openDialog() {
let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
/*
Abonnez-vous aux événements émis lorsque le fond est cliqué
REMARQUE: Comme nous n'utiliserons pas réellement l'événement `MouseEvent`, nous utiliserons simplement un trait de soulignement ici
Voir https://stackoverflow.com/a/41086381 pour plus d'informations
*/
dialogRef.backdropClick().subscribe(() => {
// Fermer la boîte de dialogue
dialogRef.close();
})
// ...
}
Alternativement, cela peut être fait dans le composant de la boîte de dialogue:
export class DialogComponent {
constructor(private dialogRef: MatDialogRef) {
dialogRef.disableClose = true;
/*
Abonnez-vous aux événements émis lorsque le fond est cliqué
REMARQUE: Comme nous n'utiliserons pas réellement l'événement `MouseEvent`, nous utiliserons simplement un trait de soulignement ici
Voir https://stackoverflow.com/a/41086381 pour plus d'informations
*/
dialogRef.backdropClick().subscribe(() => {
// Fermer la boîte de dialogue
dialogRef.close();
})
}
}
