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

Question

我目前正在研究Angular 4项目的密码重置页面。我们使用Angular Material来创建对话框，但是，当客户端单击对话框时，它将自动关闭。有没有办法避免对话关闭，直到我们的代码端调用＆＃34;关闭＆＃34;功能？或者我应该如何创建一个不可关闭的模态？

Answer 1

有两种方法可以做到。

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

以下是您正在寻找的内容：



这里是Stackblitz demo

其他用例

这里有一些其他用例和代码片段，介绍如何实现它们。

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

  

P.S。这是一个源自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://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();
    })
  }
}

Answer 2

如何使用这两个属性？

  

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

     

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

     

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

Answer 3

我知道这已经有几岁了，但是您不能使用backdrop: 'static'来禁止在外部点击，而不能使用keyboard: false来防止越狱吗？

Docs向下滚动一些到模式部分。可以肯定，这对Angular 4+来说很好。

Meh示例：

import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";

@Component({
  // Setup stuff..
})

export class ModalExample {
  modalRef: BsModalRef;

  constructor(
    private modalService: BsModalService, 
  ) { }

  ngOnInit(): void {

  }

  public openConfirmationModal(submitClaimResult: SubmitDealerClaimResult) {
    this.modalRef = this.modalService.show({backdrop: 'static', keyboard: false });
  }

}

Answer 4

这对我有用

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

Answer 5

添加

[config]="{backdrop: 'static'}"

到型号代码。

Answer 6

RTFM

根据文档here，您可以使用<Style x:Key="DataGridCellNoVisualize" TargetType="DataGridCell"> - style definition </Style> <Style x:Key="DataGridCellVisualize" TargetType="DataGridCell"> <Style.Triggers> <Trigger Property="IsReadOnly" Value="True"> <Setter Property="Background" Value="Gray"/> </Trigger> </Style.Triggers> </Style> <Style x:Key="DataGridStyle" TargetType="MyCustomDataGrid"> <Setter Property="CellStyle" Value="{StaticResource DataGridCellNoVisualize"/> <Style.Triggers> <Trigger Property="VisualizeReadOnlyCells" Value="True"> <Setter Property="CellStyle" Value="{Static Resource DataGridCellVisualize"/> </Trigger> </Style.Triggers> </Style> 输入来阻止用户关闭对话框。