gpt4 book ai didi

angular - 禁止在 Angular Material 对话框区域外单击以关闭对话框(使用 Angular 版本 4.0+)

转载 作者:太空狗 更新时间:2023-10-29 16:46:14 25 4
gpt4 key购买 nike

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

最佳答案

有两种方法。

  1. 在打开对话框的方法中,传入如下配置选项disableClose作为MatDialog#open()中的第二个参数,并设置为:

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

这是您要查找的内容:

<code>disableClose</code> property in material.angular.io

这是一个 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 is an answer which originated from this answer, where the demo was based on 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();
})
}
}

关于angular - 禁止在 Angular Material 对话框区域外单击以关闭对话框(使用 Angular 版本 4.0+),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46772852/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com