禁用在角度材质对话框区域外单击以关闭对话框(使用 Angular 版本 4.0+) [英] Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)

问题描述

我目前正在处理 Angular 4 项目的密码重置页面.我们使用 Angular Material 创建对话框，但是，当客户端单击对话框外时，它会自动关闭.有没有办法避免对话框关闭，直到我们的代码端调用关闭"函数?或者我应该如何创建一个不可关闭模态?

解决方案

有两种方法可以做到.

1. 在打开对话框的方法中，将下面的配置选项disableClose作为MatDialog#open()中的第二个参数传入并设置为<代码>真:

   export class AppComponent {构造函数(私有对话框:MatDialog){}打开对话框(){this.dialog.open(DialogComponent, { disableClose: true });}}

2. 或者，在对话框组件中执行此操作.

   export class DialogComponent {构造函数(私有对话框引用:MatDialogRef<DialogComponent>){dialogRef.disableClose = true;}}

这是您要找的:

这里有一个 Stackblitz 演示

<小时>

其他用例

这里有一些其他用例和如何实现它们的代码片段.

允许esc关闭对话框但不允许点击背景关闭对话框

正如@MarcBrazeau 在我的回答下面的评论中所说的，您可以允许 esc 键关闭模态，但仍然不允许在模态外单击.在您的对话框组件上使用此代码:

import { Component, OnInit, HostListener } from '@angular/core';从 '@angular/material' 导入 { MatDialogRef };@成分({选择器:'app-third-dialog'，templateUrl: './third-dialog.component.html'})导出类 ThirdDialogComponent {构造函数(私有 dialogRef:MatDialogRef){}@HostListener('window:keyup.esc') onKeyUp() {this.dialogRef.close();}}

<小时>

阻止 esc 关闭对话框但允许点击背景关闭

<块引用>

附言这是源自 this answer 的答案，其中演示基于此答案.

为了防止 esc 键关闭对话框但允许点击背景关闭，我已经调整了 Marc 的答案，并使用 MatDialogRef#backdropClick监听背景的点击事件.

最初，对话框的配置选项 disableClose 设置为 true.这可确保 esc 按键以及点击背景不会导致对话框关闭.

之后，订阅 MatDialogRef#backdropClick 方法(当背景被点击时发出并作为 MouseEvent 返回).

无论如何，足够的技术谈话.代码如下:

openDialog() {让 dialogRef = this.dialog.open(DialogComponent, { disableClose: true });/*订阅单击背景时发出的事件注意:由于我们实际上不会使用 `MouseEvent` 事件，我们将在这里使用下划线有关更多信息，请参阅 https://stackoverflow.com/a/41086381*/dialogRef.backdropClick().subscribe(() => {//关闭对话框dialogRef.close();})//...}

或者，这可以在对话框组件中完成:

export class DialogComponent {构造函数(私有 dialogRef:MatDialogRef<DialogComponent>){dialogRef.disableClose = true;/*订阅单击背景时发出的事件注意:由于我们实际上不会使用 `MouseEvent` 事件，我们将在这里使用下划线有关更多信息，请参阅 https://stackoverflow.com/a/41086381*/dialogRef.backdropClick().subscribe(() => {//关闭对话框dialogRef.close();})}}

I am currently working on password reset page of an Angular 4 project. We are using Angular Material to create the dialog, however, when the client clicks out of the dialog, it will close automatically. Is there a way to avoid the dialog close until our code side call "close" function? Or how should I create an unclosable modal?

解决方案

There are two ways to do it.

1. In the method that opens the dialog, pass in the following configuration option disableClose as the second parameter in MatDialog#open() and set it to true:

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

2. Alternatively, do it in the dialog component itself.

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

Here's what you're looking for:

And here's a Stackblitz demo

---

Other use cases

Here's some other use cases and code snippets of how to implement them.

Allow esc to close the dialog but disallow clicking on the backdrop to close the dialog

As what @MarcBrazeau said in the comment below my answer, you can allow the esc key to close the modal but still disallow clicking outside the modal. Use this code on your dialog component:

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

}

---

Prevent esc from closing the dialog but allow clicking on the backdrop to close

P.S. This is an answer which originated from this answer, where the demo was based on this answer.

To prevent the esc key from closing the dialog but allow clicking on the backdrop to close, I've adapted Marc's answer, as well as using MatDialogRef#backdropClick to listen for click events to the backdrop.

Initially, the dialog will have the configuration option disableClose set as true. This ensures that the esc keypress, as well as clicking on the backdrop will not cause the dialog to close.

Afterwards, subscribe to the MatDialogRef#backdropClick method (which emits when the backdrop gets clicked and returns as a MouseEvent).

Anyways, enough technical talk. Here's the code:

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

  // ...
}

Alternatively, this can be done in the dialog component:

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

这篇关于禁用在角度材质对话框区域外单击以关闭对话框(使用 Angular 版本 4.0+)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！