Estoy usando el Diálogo de material angular para mostrar un mensaje de advertencia en mi aplicación.

Necesito verificar si un diálogo ya está abierto así:

private _openDialog() {
  // if (this.dialog.isOpen()) return; <-- NOT WORKING
  this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });

}

Pregunta: ¿Hay alguna forma de verificar si un cuadro de diálogo de material angular ya está abierto?

7
Vingtoft 10 sep. 2018 a las 16:52

3 respuestas

La mejor respuesta

Si está en un solo componente, solo almacene la referencia. Útil para manipularlo.

private _openDialog() {
  if (!this.dialogRef) return;
  this.dialogRef = this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });

  this.dialogRef.afterClosed().pipe(
    finalize(() => this.dialogRef = undefined)
  );
}

Si se trata de componentes, verifique la lista de cuadros de diálogo abiertos:

private _openDialog() {
  if (!this.dialog.openDialogs || !this.dialog.openDialogs.length) return;
  this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });
}
20
10 sep. 2018 a las 15:06

¿Puede consultar este enlace verificar el diálogo abierto

private _openDialog() {
  // Only show if not already open
  if ($('.mat-dialog-container').length > 0) return;
  this.dialog.open(WarningComponent, {
     width: '450px',
     height: '380px',
  });
}
-1
Vingtoft 10 sep. 2018 a las 14:20

Mi solución fue declarar un booleano

public isLoginDialogOpen: boolean = false; // I know by default it's false

public openLoginDialog() {

if (this.isLoginDialogOpen) {
  return;
}

this.isLoginDialogOpen = true;

this.loginDialogRef = this.dialog.open(LoginDialogComponent, {
  data: null,
  panelClass: 'theme-dialog',
  autoFocus: false
});

this.loginDialogRef.afterClosed().subscribe(result => {
  this.isLoginDialogOpen = false;
  console.log('The dialog was closed');
});
}
0
C.Ikongo 9 mar. 2020 a las 16:41