В настоящее время я работаю над страницей сброса пароля в проекте Angular 4. Мы используем Angular Material для создания диалогового окна, однако, когда клиент выйдет за пределы диалогового окна, оно автоматически закроется. Есть ли способ избежать закрытия диалогового окна до тех пор, пока наша сторона кода не вызовет функцию «закрыть»? Или как мне создать не закрываемый модальный?

Это можно сделать двумя способами.

1. В методе, который открывает диалоговое окно, передайте следующий параметр конфигурации disableCloseв качестве второго параметра MatDialog#open()и установите для него значение true:

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

2. Или сделайте это в самом диалоговом компоненте.

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

Вот что вы ищете:

А вот демо Stackblitz

Другие варианты использования

Вот еще несколько примеров использования и фрагменты кода, показывающие, как их реализовать.

Разрешить escзакрыть диалоговое окно, но запретить щелкать по фону, чтобы закрыть диалоговое окно

Как сказал @MarcBrazeau в комментарии под моим ответом, вы можете разрешить escключу закрывать модальное окно, но по-прежнему запрещать щелчок за пределами модального окна. Используйте этот код в своем диалоговом компоненте:

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

}

Запретить escзакрытие диалогового окна, но разрешить щелкнуть по фону, чтобы закрыть

PS Это ответ, который возник из этого ответа , где демонстрация была основана на этом ответе.

Чтобы escключ не закрыл диалоговое окно, но разрешил щелкнуть по фону для закрытия, я адаптировал ответ Марка, а также использовал MatDialogRef#backdropClickдля прослушивания событий щелчка на фоне.

Первоначально диалог будет иметь опцию конфигурации disableCloseнабор как true. Это гарантирует, что escнажатие клавиши, а также нажатие на фон не приведет к закрытию диалога.

После этого подпишитесь на MatDialogRef#backdropClickметод (который излучается при нажатии на фон и возвращается как a MouseEvent).

В любом случае, достаточно технических разговоров. Вот код:

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

  // ...
}

Как вариант, это можно сделать в диалоговом компоненте:

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

Как насчет игры с этими двумя свойствами?

disableClose: boolean - Может ли пользователь использовать escape или щелкнуть фон, чтобы закрыть модальное окно.

hasBackdrop: boolean - Имеет ли диалог фон.

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

Добавить

[config]="{backdrop: 'static'}"

к коду модели.