禁用在角度材料对话框区域外单击以关闭对话框（使用 Angular 版本 4.0+）

Posted 2023-02-15

技术标签:

【中文标题】禁用在角度材料对话框区域外单击以关闭对话框（使用 Angular 版本 4.0+）【英文标题】：Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+) 【发布时间】：2018-03-28 02:59:13 【问题描述】：

我目前正在处理 Angular 4 项目的密码重置页面。我们使用 Angular Material 来创建对话框，然而，当客户端点击离开对话框时，它会自动关闭。有没有办法避免对话框关闭，直到我们的代码端调用“关闭”函数？或者我应该如何创建一个 unclosable 模态？

【问题讨论】：

【参考方案1】：

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

在打开对话框的方法中，将以下配置选项disableClose作为MatDialog#open()中的第二个参数传入并设置为true：

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

或者，在对话框组件本身中执行此操作。

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

这就是您要查找的内容：

这是Stackblitz demo

其他用例

这里有一些其他用例和如何实现它们的代码 sn-ps。

允许`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` 关闭对话框，但允许点击背景关闭

附：这是一个源自this answer 的答案，演示基于此答案。

为了防止 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://***.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://***.com/a/41086381 for more info
    */
    dialogRef.backdropClick().subscribe(() => 
      // Close the dialog
      dialogRef.close();
    )

【讨论】：

我确实觉得你必须同时禁用“退出和点击外部”这很烦人。要解决这个问题：@HostListener('window:keyup.esc') onKeyUp() this.dialogRef.close(); @MarcBrazeau 我已将您的评论添加到我的回答中。对使用自动完成输入字段的人的警告。当您关闭自动完成列表时，使用 HostListener 会关闭对话框。感谢您的帮助您还需要处理从背景点击 Observable 取消订阅，否则您会引入内存泄漏。【参考方案2】：

试试这两个属性怎么样？