如何在 Angular 函数内使用 JavaScript 触发 bootstrap5 data-bs-dismiss

Question

我正在尝试使用 JavaScript 以角度方式关闭/隐藏 bootstrap5 模式，问题是 bootstrap 中的隐藏功能无法正常工作，所以我想做的是单击一个具有 data-bs-dismiss 的按钮，它就可以工作如果我手动单击它，但如果我尝试通过 JavaScript 执行此操作则不起作用。

<div class="modal fade" id="#modalId" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"
    data-toggle="modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-body">
                    <button id="modalDismiss" data-bs-dismiss="modal" aria-hidden="true">Test</button>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

document.getElementById('modalDismiss').click(); // notwoking
new window.bootstrap.Modal(document.getElementById('modalId')).hide(); //trying this same problem :(
new window.bootstrap.Modal(document.getElementById('modalId')).show(); //trying to show the modal works fine idon't why the hide function not working for me.

我跟踪

modalDismiss

的点击事件，发现关闭模态框的事件

我不知道这是否与问题相关。

Answer 1

完整演示在此 Stackblitz 演示

基本上，您需要从

import { Modal } from 'bootstrap';

导入模态类。

当模态打开时，您需要为该模态类分配模态引用，然后创建新实例。

 open(element: any): void {
   this.modalDirect = new Modal(element, {});
   this.modalDirect.show();
 }

然后，当您单击关闭按钮时，调用此关闭方法。

close() {
  this.modalDirect.hide();
}

您可以在附加的 stackblitz 中找到完整的代码。

Answer 2

所以我相信你的模式中至少有 1 个解雇按钮。

您可以在handleSubmit上或任何您想忽略的地方执行此操作

const closeButton = form.querySelector('[data-bs-dismiss="modal"]');
        if (closeButton) {
          closeButton.click();
        }

这是关闭或取消模态的最佳方式