黄兵的个人博客

MDCDialog 无法关闭问题总结

最近在使用 MDCDialog 的样式库，点击打开 Dialog 的代码如下：

function deleteNumberAction() {
    // 获取所有具有类名 "btn" 的元素
    var buttons = document.getElementsByClassName("btn");

    // 遍历每个按钮并绑定单击事件
    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        if (button.id.startsWith("delete-number-")) { // 过滤掉不需要的按钮
            button.addEventListener("click", function () {
                // 在这里添加处理单击事件的代码
                const dialog = new mdc.dialog.MDCDialog(document.querySelector('.mdc-dialog'));
                dialog.open()
                $("#delete-confirm").attr("data-number", $(this).data('number'))
            });
        }
    }
}

上面的代码通过获取所有具有类名 "btn" 的元素，然后遍历每个按钮并绑定单击事件。在过滤掉不需要的按钮后，添加一个单击事件处理程序，该处理程序实例化一个 MDCDialog 并调用其 open() 方法来打开对话框。

但是上面存在一个问题，我单击一个按钮或者出发另外一个事件，无法关闭 Dialog。

解决方法如下：

function deleteNumberAction() {
    // 获取所有具有类名 "btn" 的元素
    var buttons = document.getElementsByClassName("btn");

    // 遍历每个按钮并绑定单击事件
    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        if (button.id.startsWith("delete-number-")) { // 过滤掉不需要的按钮
            button.addEventListener("click", function () {
                // 在这里添加处理单击事件的代码
                const dialog = new mdc.dialog.MDCDialog(document.querySelector('.mdc-dialog'));
                dialog.open()
                
                $("#delete-confirm").attr("data-number", $(this).data('number'))
                
                // 在这里添加关闭对话框的代码
                $('#close-dialog-btn').on('click', function() {
                    dialog.close();
                });
            });
        }
    }
}

这里需要注意的是：重新打开 Dialog 之后，再次关闭，从效果来说的确没有问题。

在上面的示例中，我们添加了一个新的处理程序来捕获关闭对话框按钮的单击事件。在事件处理程序中，我们获取对话框实例并调用其 close() 方法以关闭对话框。

这样就解决了这个问题。

其它相关推荐：

1、Angular 调试表单验证

2、Angular 确认密码验证

3、Angular 学习 - 创建组件

4、angular mat-toolbar 滚动增加阴影

5、Angular HttpClient HttpParams() 设置参数