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?
Il y a deux façons de le faire.
Dans la méthode qui ouvre la boîte de dialogue, transmettez l'option de configuration suivante disableClose
en tant que deuxième paramètre de MatDialog#open()
et définissez-la sur true
name__:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
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:
Et voici une démo de Stackblitz
Voici quelques autres cas d'utilisation et extraits de code sur la manière de les implémenter.
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();
}
}
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 disableClose
sera définie dans la boîte de dialogue en tant que true
name__. Cela garantit que la pression de la touche esc
name__, 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 MouseEvent
name__).
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();
})
}
}
Ça marche pour moi
openDialog() {
this.dialog.open(YourComponent, { disableClose: true });
}
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 });
}
}