Зараз я працюю на сторінці скидання пароля проекту 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 - чи може користувач використовувати клавішу введення або клацання на задньому плані, щоб закрити модаль.

hasBackdrop: boolean - чи має діалогове вікно задник.

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