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

问题描述

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

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?

推荐答案

有两种方法.

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

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

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

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:

这是一个 Stackblitz演示

还有其他一些用例以及如何实现它们的代码段.

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

就像@MarcBrazeau在我的答案下方的评论中所说的那样，您可以允许键关闭模式，但仍然不允许在模式外部单击.在对话框组件上使用以下代码:

As what @MarcBrazeau said in the comment below my answer, you can allow the 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 from closing the dialog but allow clicking on the backdrop to close

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

To prevent the 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.

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

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.

然后，订阅MatDialogRef#backdropClick方法(单击背景幕时发出，并以MouseEvent形式返回).

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+)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！