page - change title angular 4

Desactive hacer clic fuera del área de diálogo de material angular para cerrar el cuadro de diálogo(con Angular Version 4.0+)

Question

Actualmente estoy trabajando en la página de restablecimiento de contraseña de un proyecto de Angular 4. Estamos utilizando material angular para crear el cuadro de diálogo, sin embargo, cuando el cliente hace clic fuera del cuadro de diálogo, se cerrará automáticamente. ¿Hay alguna forma de evitar que el diálogo se cierre hasta que nuestro lado del código llame a la función "cerrar"? ¿O cómo debo crear un modal que no se pueda cerrar?

Answer 1

Hay dos maneras de hacerlo.

1. 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 disableClose como true :

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

2. Alternativamente, hacerlo en el componente de diálogo en sí.

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

Esto es lo que estás buscando:

Y aquí hay una demo de Stackblitz.

Otros casos de uso

Aquí hay algunos otros casos de uso y fragmentos de código de cómo implementarlos.

Permitir que esc cierre el cuadro de diálogo pero no permite hacer clic en el fondo para cerrar el cuadro de diálogo

Como lo que dijo @MarcBrazeau en el comentario a continuación de mi respuesta, puede permitir que la tecla esc cierre el modal pero aún así no permita 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<ThirdDialogComponent>) {      
}
  @HostListener(''window:keyup.esc'') onKeyUp() {
    this.dialogRef.close();
  }

}

Evita que esc cierre el cuadro de diálogo pero permite hacer clic en el fondo para cerrar

PS Esta es una respuesta que se originó a partir de esta respuesta , donde la demostración se basó en esta respuesta.

Para evitar que la tecla esc cierre el cuadro de diálogo, pero permite que se haga clic en el fondo para cerrarlo, he adaptado la respuesta de Marc y también MatDialogRef#backdropClick usado MatDialogRef#backdropClick para escuchar los eventos de clics en el fondo.

Inicialmente, el cuadro de diálogo tendrá la opción de configuración disableClose establecida como true . Esto garantiza que la pulsación de la tecla esc , así como hacer clic en el fondo, no hará que se cierre el cuadro de diálogo.

Posteriormente, suscríbase al método MatDialogRef#backdropClick (que se emite cuando se hace clic en el fondo y se devuelve 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://.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<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://.com/a/41086381 for more info
    */
    dialogRef.backdropClick().subscribe(() => {
      // Close the dialog
      dialogRef.close();
    })
  }
}

Answer 2

RTFM

De acuerdo con la documentación here , puede utilizar la entrada disableClose para evitar que el usuario cierre el cuadro de diálogo.