禁用角度材料对话框区域外的单击以关闭对话框(使用Angular Version 4.0+)

Question

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

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

这是你要找的东西:

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

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

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

  // ...
}

Answer 2

玩弄这两个属性怎么样？

disableClose: boolean - 用户是否可以使用转义或点击背景来关闭模式。

hasBackdrop: boolean - 对话框是否有背景。

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