禁用在“角材料”对话框区域之外单击以关闭对话框(使用Angular版本4.0+)


103

我目前正在Angular 4项目的密码重置页面上工作。我们正在使用Angular Material来创建对话框,但是,当客户端单击该对话框时,它将自动关闭。有没有办法避免对话框关闭,直到我们的代码端调用“关闭”功能?还是应该创建一个不可关闭的模态?

Answers:


267

有两种方法可以做到这一点。

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

这是您要查找的内容:

material.angular.io中的<code> disableClose </ code>属性

这是一个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按键关闭对话框但允许单击背景关闭,我调整了Marc的答案,并使用它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();
    })
  }
}

5
我确实很烦人,您必须同时禁用“转义和单击外部”。要解决此问题:@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }
Marc Brazeau

@MarcBrazeau我已将您的评论添加到我的答案中。
Edric

1
对使用具有自动完成功能的输入字段的人员的警告。关闭自动完成列表时,使用HostListener会关闭对话框。
詹皮斯

感谢您的帮助
拉斐尔·莫拉

1
您还需要处理从backgroundClickObservable退订的操作,否则会导致内存泄漏。
严峻

3

玩这两个属性怎么样?

disableClose:布尔值-用户是否可以使用转义或单击背景关闭模式。

hasBackdrop:布尔值-对话框是否具有背景。

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


将hasBackdrop设置为false会删除对话框外部的区域变黑
Mohit Atray

使用Angular9。'hasBackdrop'不允许用户与其他外部元素进行交互。disableClose不允许用户使用外部单击或退出键关闭对话框。
Naveen Kumar V
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.