Atualmente, estou trabalhando na página de redefinição de senha de um projeto Angular 4. Estamos usando Angular Material para criar a caixa de diálogo, no entanto, quando o cliente clica fora da caixa de diálogo, ela será fechada automaticamente. Existe uma maneira de evitar que a caixa de diálogo feche até que nosso código chame a função "fechar"? Ou como devo criar um modal que não pode ser fechado ?

Existem duas maneiras de fazer isso.

1. No método que abre a caixa de diálogo, passe a seguinte opção de configuração disableClosecomo o segundo parâmetro MatDialog#open()e defina-a como true:

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

2. Como alternativa, faça isso no próprio componente de diálogo.

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

Aqui está o que você está procurando:

E aqui está uma demonstração Stackblitz

Outros casos de uso

Aqui estão alguns outros casos de uso e trechos de código de como implementá-los.

Permite escfechar a caixa de diálogo, mas não permite clicar no pano de fundo para fechar a caixa de diálogo

Como @MarcBrazeau disse no comentário abaixo da minha resposta, você pode permitir que a esctecla feche o modal, mas ainda não permite clicar fora do modal. Use este código em seu 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();
  }

}

Impedir escde fechar a caixa de diálogo, mas permitir clicar no pano de fundo para fechar

PS Esta é uma resposta que teve origem nesta resposta , onde a demonstração foi baseada nesta resposta.

Para evitar que a esctecla feche a caixa de diálogo, mas permitir o clique no pano de fundo para fechar, adaptei a resposta de Marc, além de usar MatDialogRef#backdropClickpara ouvir eventos de clique no pano de fundo.

Inicialmente, a caixa de diálogo terá a opção de configuração disableClosedefinida como true. Isso garante que o escpressionamento de tecla, bem como o clique na tela de fundo, não farão com que a caixa de diálogo feche.

Depois, inscreva-se no MatDialogRef#backdropClickmétodo (que é emitido quando a tela de fundo é clicada e retorna como a MouseEvent).

De qualquer forma, chega de conversa técnica. Aqui está o 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, isso pode ser feito no 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://stackoverflow.com/a/41086381 for more info
    */
    dialogRef.backdropClick().subscribe(() => {
      // Close the dialog
      dialogRef.close();
    })
  }
}

Que tal brincar com essas duas propriedades?

disableClose: boolean - se o usuário pode usar escape ou clicar na tela de fundo para fechar o modal.

hasBackdrop: boolean - Se a caixa de diálogo tem um fundo.

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