Attualmente sto lavorando alla pagina di reimpostazione della password di un progetto Angular 4. Stiamo usando Angular Material per creare la finestra di dialogo, tuttavia, quando il client fa clic fuori dalla finestra di dialogo, questa si chiuderà automaticamente. C'è un modo per evitare che la finestra di dialogo si chiuda fino a quando la nostra funzione di "chiusura" chiamata lato codice? O come dovrei creare un modale non chiudibile ?

Ci sono due modi per farlo.

1. Nel metodo che apre la finestra di dialogo, passare la seguente opzione di configurazione disableClosecome secondo parametro in MatDialog#open()e impostarla su true:

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

2. In alternativa, fallo nel componente di dialogo stesso.

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

Ecco cosa stai cercando:

Ed ecco una demo di Stackblitz

Altri casi d'uso

Ecco alcuni altri casi d'uso e frammenti di codice su come implementarli.

Consenti escdi chiudere la finestra di dialogo ma non consentire di fare clic sullo sfondo per chiudere la finestra di dialogo

Come ha detto @MarcBrazeau nel commento sotto la mia risposta, puoi consentire alla escchiave di chiudere il modale ma non consentire comunque di fare clic al di fuori del modale. Usa questo codice sul tuo componente di dialogo:

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();
  }

}

Impedisci la escchiusura della finestra di dialogo ma consenti la chiusura del clic sullo sfondo

PS Questa è una risposta che ha avuto origine da questa risposta , dove la demo era basata su questa risposta.

Per impedire alla escchiave di chiudere la finestra di dialogo ma consentire la chiusura del clic sullo sfondo, ho adattato la risposta di Marc, oltre a utilizzare MatDialogRef#backdropClickper ascoltare gli eventi di clic sullo sfondo.

Inizialmente, la finestra di dialogo avrà l'opzione di configurazione disableCloseimpostata come true. Ciò garantisce che la escpressione del tasto, così come il clic sullo sfondo, non causerà la chiusura della finestra di dialogo.

Successivamente, iscriviti al MatDialogRef#backdropClickmetodo (che emette quando lo sfondo viene cliccato e ritorna come a MouseEvent).

Comunque, abbastanza chiacchiere tecniche. Ecco il codice:

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();
  })

  // ...
}

In alternativa, questo può essere fatto nel componente di dialogo:

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();
    })
  }
}

Che ne dici di giocare con queste due proprietà?

disableClose: boolean - Indica se l'utente può utilizzare l'escape o fare clic sullo sfondo per chiudere il modale.

hasBackdrop: boolean - Indica se la finestra di dialogo ha uno sfondo.

https://material.angular.io/components/dialog/api