it-swarm.com.ru

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

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

46
Zeqing Zhang

Есть два способа сделать это.

  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> property in 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 закрыть диалог, но разрешить щелкать на фоне, чтобы закрыть

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

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

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

После этого подпишитесь на метод MatDialogRef#backdropClick (который генерируется при нажатии на фон и возвращается как 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();
    })
  }
}
117
Edric

RTFM

Согласно документации здесь вы можете использовать вход disableClose, чтобы запретить пользователю закрывать диалог.

0
Abdel

Это работает для меня 

  openDialog() {
    this.dialog.open(YourComponent, { disableClose: true });
  }
0
Akitha_MJ