Отключите щелчок за пределами диалоговой области углового материала, чтобы закрыть диалоговое окно (с Angular версии 4.0+)

109

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

Терри Чжан
источник

Ответы:

281

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

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

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

Свойство <code> disableClose </code> в material.angular.io

А вот демо 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();
    })
  }
}
Эдрик
источник
5
Меня действительно раздражает то, что вам нужно отключить как «побег, так и щелчок снаружи». Чтобы обойти это:@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
Marc Brazeau
@MarcBrazeau Я добавил ваш комментарий к своему ответу.
Эдрик
1
Предупреждение для людей, использующих поля ввода с автозаполнением. Использование HostListener закрывает диалоговое окно, когда вы закрываете список автозаполнения.
Jompis
Спасибо за вашу помощь
Рафаэль Моура
1
Вам также нужно будет обработать отказ от подписки на backdropClick Observable, иначе вы получите утечку памяти.
мрачный
3

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

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

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

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

Alansiqueira27
источник
установка hasBackdrop ложных Снимает почернение области за пределами диалога
Мохит Atray
Работал с Angular 9. hasBackdrop не позволяет пользователю взаимодействовать с другими внешними элементами. disableClose не позволяет пользователю закрыть диалоговое окно с помощью внешнего щелчка или клавиши выхода.
Naveen Kumar V,
0

Добавить

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

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

Сачини Витхарана
источник