Deseamos mostrarte la mejor respuesta que hemos encontrado on line. Nosotros deseamos que te sea de mucha utilidad y si puedes comentarnos algún detalle que nos pueda ayudar a crecer hazlo libremente.
Solución:
Hay dos maneras de hacerlo.
En el método que abre el cuadro de diálogo, pase la siguiente opción de configuración disableClose como el segundo parámetro en MatDialog#open() y configúralo en true:
Alternativamente, hágalo en el propio componente de diálogo.
export class DialogComponent
constructor(private dialogRef: MatDialogRef)
dialogRef.disableClose = true;
Esto es lo que estás buscando:
disableClose propiedad en material.angular.io” src=”https://i.stack.imgur.com/om5sF.jpg” />
Y aquí hay una demostración de Stackblitz
Otros casos de uso
Aquí hay algunos otros casos de uso y fragmentos de código de cómo implementarlos.
Permitir Esc para cerrar el cuadro de diálogo pero no permitir hacer clic en el fondo para cerrar el cuadro de diálogo
Como dijo @MarcBrazeau en el comentario debajo de mi respuesta, puede permitir que el Esc key para cerrar el modal pero aún no permitir hacer clic fuera del modal. Use este código en su componente de diálogo:
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();
Evitar Esc de cerrar el cuadro de diálogo pero permite hacer clic en el fondo para cerrar
PD Esta es una respuesta que se originó a partir de esta respuesta, donde la demostración se basó en esta respuesta.
Para prevenir el Esc key de cerrar el cuadro de diálogo pero permitir hacer clic en el fondo para cerrar, he adaptado la respuesta de Marc, además de usar MatDialogRef#backdropClick para escuchar los eventos de clic en el fondo.
Inicialmente, el cuadro de diálogo tendrá la opción de configuración disableClose establecer como true. Esto asegura que el esc presionar una tecla, así como hacer clic en el fondo no hará que el cuadro de diálogo se cierre.
Posteriormente, suscríbase a la MatDialogRef#backdropClick (que se emite cuando se hace clic en el fondo y regresa como un MouseEvent).
De todos modos, suficiente charla técnica. Aquí está el código:
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();
)
// ...
Alternativamente, esto se puede hacer en el componente de diálogo:
export class DialogComponent
constructor(private dialogRef: MatDialogRef)
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();
)
¿Qué tal jugar con estas dos propiedades?
deshabilitarCerrar: booleano: si el usuario puede usar escape o hacer clic en el fondo para cerrar el modal.
tiene fondo: booleano: indica si el diálogo tiene un fondo.
https://material.angular.io/components/dialog/api
valoraciones y reseñas
Recuerda que tienes el privilegio añadir una tasación justa si diste con el arreglo.
